4.more.html · thinkphp5學習筆記(二)

~~~ {include file="public/header"/}  <div class="layui-layer-content" > <div class="hhAlbum_menu" > <ul> {volist name="file_tag" id="vo"} <a href="/admin/imgfile/simple/tag_id/{$vo.id}.html"> <li {eq name='vo.id' value='$Request.param.tag_id'}class="active"{/eq}> {$vo.title} <span> {$vo.id|getImgNum}張 </span> {neq name="vo['id']" value="1"} <a onClick="admin_edit('修改分組','/admin/imgfiletag/edit/id/{$vo.id}.html','500','510')" class="btn_edit"> <i class="layui-icon"></i> </a> <a onClick="admin_del(this,{$vo['id']})" class="btn_del"> <i class="layui-icon"></i> </a> {/neq} </li> </a> {/volist} <li> <a class="btn_create" title="創建" onClick="admin_edit('添加分組','/admin/imgfileTag/add/id/0.html','500','510')" style="text-decoration:none"> + 創建 </a> </li> </ul> </div> <div class="hhAlbum_imgs"> <ul> {volist name="file" id="vo" empty="暫無該類信息~"} <li data-id="undefined" class="undefined"> <div> <img class="lazy" src="/public{$vo.url}"> <b> </b> <p> 1620 x 1080 </p> </div> <input type="checkbox" name="id" class="checkbox" value="{$vo.url}" > <span> ...{$vo.url|mb_substr=-12,-1}g </span> <a onClick="admin_edit('修改分組','/admin/imgfile/edit/id/{$vo.id}.html','500','510')" style=" color: #2196f3;cursor: pointer"> 分組 </a> <a onClick="admin_del(this,'{$vo.id}')" style=" color: #2196f3;cursor: pointer"> 刪除 </a> </li> {/volist} </ul> <p class="clear"> </p> </div> <div class="hhAlbum_pages" id="pagination"> </div> <div class="hhAlbum_actions"> <div id="uploadimgwrap_1527242603094" style="position: relative;"> <a href="javascript:;" class="btn_upload layui-btn layui-btn-normal waves-effect" id="test1" style="z-index: 1;"> <i class="layui-icon"></i> 上傳照片</a> </div> </div> <div class="hhAlbum_footer"> <p class="hh_tip" style="display: none;"> 提示 </p> <a class="hh_btn btn_sub" id="imgchoice"> 確定 </a> </div> </div> <script src="/public/admin/js/jquery.min.js"></script> <script src="/public/admin/js/layui/layui.all.js"></script> <script src="/public/admin/js/admin.js"></script> <script src="/public/static/js/ueditor/ueditor.config.js"></script> <script src="/public/static/js/ueditor/ueditor.all.min.js"></script> <script> // 修改分組 function admin_edit(title,url,w,h){ xadmin_show(title,url,w,h); } // 刪除 function admin_del(obj,id){ layer.confirm('確認要刪除嗎？',function(index){ //發異步把用戶狀態進行更改 $.get("{:url('imgfile/delete')}",{id:id},function(data){ window.location.replace(location.href); layer.msg(data); }); }); } //選擇圖片-多張 /*******start*******/ $("body").on("click","#imgchoice",function(){ if($('.checkbox').is(':checked')) { //捉到所有被選中的，發異步進行處理 //var id_array=new Array(); $('input[name="id"]:checked').each(function(){ //id_array.push($(this).val());//向數組中添加元素 var photoListItem = '<div class="photo-list"><input type="text" name="photo[]" value="' + $(this).val() + '" class="layui-input layui-input-inline">'; photoListItem += '<button type="button" class="layui-btn layui-btn-danger remove-photo-btn">移除</button></div>'; window.parent.$('#photo-container').append(photoListItem).on('click', '.remove-photo-btn', function () { $(this).parent('.photo-list').remove(); }); }); // 獲得frame索引 var index = parent.layer.getFrameIndex(window.name); //關閉當前frame parent.layer.close(index); //var idstr=id_array.join(',');//將數組元素連接起來以構建一個字符串 /*******************************************************/ /* $.ajax({ url:"{:url('imgfile/checkmore')}", data:$('.piliangshanchan').serialize(), dataType: "json", type:'post', async: false, success:function(res) { //console.log(res); if(res.status == 1) { window.location.replace(location.href); layer.msg(res.message+"，共刪除"+res.num+"數據"); // window.location.reload(); } else { layer.msg(res.message); } } })*/ /*******************************************************/ }else{ layer.msg('請選擇~~'); } }) </script> <style> .layui-layer-content { position: relative; /*padding: 20px;*/ line-height: 24px; word-break: break-all; font-size: 14px; overflow: auto; } .hhAlbum_menu { position: absolute; left: 0; width: 200px; height: 100%; background: #f7f7f7; overflow: auto; border-right: 1px solid #eaeaea; } .hhAlbum_menu ul { padding: 0; margin: 0; } .hhAlbum_menu ul li.active { background: #fff; } .hhAlbum_menu ul li { position: relative; padding: 12px 50px 12px 12px; font: 14px/18px "微軟雅黑"; cursor: pointer; border-bottom: 1px solid #eaeaea; } .hhAlbum_menu ul li span { position: absolute; right: 12px; top: 12px; } .hhAlbum_imgs { position: relative; height: 318px; margin-left: 200px; border: 0px solid #f00; } .hhAlbum_imgs ul { padding: 5px; border: 0px solid #f00; } .hhAlbum_imgs ul li { float: left; margin: 5px; width: 120px; list-style: none; } .hhAlbum_imgs ul li div { position: relative; width: 120px; height: 120px; } .hhAlbum_imgs ul li img { width: 100%; height: 100%; cursor: pointer; } .hhAlbum_imgs ul li div b { display: none; position: absolute; left: 0; top: 0; z-index: 5; width: 116px; height: 116px; border: 2px solid #6ec174; box-sizing: content-box; cursor: pointer; } .hhAlbum_imgs ul li div p { position: absolute; left: 0; bottom: 0; width: 100%; color: #fff; background: rgba(0,0,0,0.3); } .hhAlbum_imgs ul li p { font: 12px/20px "微軟雅黑"; margin: 5px 0 0; padding: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hhAlbum_pages { height: 38px; padding: 12px 0 0 210px; /* border-top: 1px solid #eee;*/ box-sizing: content-box; } .hhAlbum_actions { position: absolute; bottom: 60px; right: 0; height: 50px; padding-right: 50px; } .hhAlbum_footer { /*position: absolute;*/ bottom: 0; width: 100%; height: 60px; margin: 0; padding: 0; /* border-top: 1px solid #e7eaec;*/ overflow: hidden; } .hhAlbum_footer .hh_tip { display: none; padding: 0; position: absolute; left: 20px; top: 20px; font: 14px/20px "微軟雅黑"; color: #f26e67; } .hhAlbum_footer .hh_btn { display: block; width: 150px; margin: 13px auto; padding: 5px; font: 16px/24px "微軟雅黑"; color: #fff; text-align: center; background: #337AB7; border-radius: 3px; cursor: pointer; } .hhAlbum_imgs ul li.selected b { display: block; background: url(/public/album_check.png) no-repeat right bottom; } </style>  {include file="public/footer"/} ~~~