Layui 寫一個簡單的後臺頁面
阿新 • • 發佈:2018-06-20
觸發 scale item href method pts iframe 都是 rem
參考如下:
1、layui 官方文檔 http://www.layui.com/doc/
2、https://blog.csdn.net/huyanliang/article/details/77966610
3、http://m.zhengjinfan.cn/(演示地址)http://git.oschina.net/besteasyteam/beginner_admin (下載地址)【在這裏學習到原來js可以這麽玩】
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>後臺管理</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href="Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="Scripts/layui/layui.js"></script> <!-- 註意:如果你直接復制所有代碼到本地,上述css路徑需要改成你本地的 layui v=2.30 --> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo" style="background-color:#99ffd7;border-bottom:2px solid #028a3f;border-right:2px solid #b102b9;">後臺管理</div> <!-- 頭部區域(可配合layui已有的水平導航) --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item nav-suofang"> <i class="layui-icon zoom-suofang layui-icon-shrink-right" style="font-size: 30px; color: #ffffff;"></i> <i class="layui-icon size-da-xiao" style="font-size: 30px; color: #ffffff;"></i> </li> <li class="layui-nav-item"><a id="size_"></a></li> <li class="layui-nav-item"><a href=""><i class="layui-icon" style="font-size: 20px; color: #1E9FFF;"></i> 控制臺</a></li> <li class="layui-nav-item"><a href="">商品管理</a></li> <li class="layui-nav-item"><a href="">用戶</a></li> <li class="layui-nav-item"> <a href="javascript:;">其它系統</a> <dl class="layui-nav-child"> <dd><a href="">郵件管理</a></dd> <dd><a href="">消息管理</a></dd> <dd><a href="">授權管理</a></dd> </dl> </li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 賢心 </a> <dl class="layui-nav-child"> <dd><a href="">基本資料</a></dd> <dd><a href="">安全設置</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">退了</a></li> </ul> </div> <div class="layui-side layui-bg-black" > <div class="layui-side-scroll" id="admin-scroll"> <!-- 左側導航區域(可配合layui已有的垂直導航) --> </div> </div> <div class="layui-footer" style="border-left:2px solid #b102b9" > <!-- 底部固定區域 --> ? layui.com - 底部固定區域 </div> <div class="layui-body" style="border-left:2px solid #b102b9;border-top:2px solid #028a3f;"> <div class="layui-tab layui-tab-brief" lay-filter="demo" style="margin:0px;"> <ul class="layui-tab-title"> <li class="layui-this" lay-id="111" >網站設置 </li> <!--<li lay-id="222">用戶管理 <i class="layui-icon layui-unselect layui-tab-close">?</i></li> <li lay-id="333">權限分配</li> <li lay-id="444">商品管理</li> <li lay-id="555">訂單管理</li>--> </ul> <div class="layui-tab-content" style="padding:2px 0px 0px 5px;height:100%"> <div class="layui-tab-item layui-show"> 主頁 <!--<div class="site-demo-button"> <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab項</button> <button class="layui-btn site-demo-active" data-type="tabDelete">刪除:商品管理</button> <button class="layui-btn site-demo-active" data-type="tabChange">切換到:用戶管理</button> </div>--> </div> <!--<div class="layui-tab-item">內容2</div> <div class="layui-tab-item">內容3</div> <div class="layui-tab-item">內容4</div> <div class="layui-tab-item">內容5</div>--> </div> </div> </div> </div> <!-- 註意:如果你直接復制所有代碼到本地,上述js路徑需要改成你本地的 --> <script> layui.use([‘element‘,‘layer‘] ,function () { var $ = layui.jquery , layer = layui.layer , element = layui.element; //Tab的切換功能,切換事件監聽等,需要依賴element模塊 ////觸發事件 //var active = { // tabAdd: function () { // //新增一個Tab項 // element.tabAdd(‘demo‘, { // title: ‘新選項<i class="layui-icon layui-unselect layui-tab-close">?</i>‘ //用於演示 // , content: ‘<iframe src="http://www.baidu.com" style="width:100%;height:‘ + ($content.height() - 50) +‘px;" frameborder="0"></iframe>‘ // , id: new Date().getTime() //實際使用一般是規定好的id,這裏以時間戳模擬下 // }); // //增加點擊關閉事件 // var r = $(".layui-tab-title").find("li"); // //每次新打開tab都是最後一個,所以只對最後一個tab添加點擊關閉事件 // r.eq(r.length - 1).children("i").on("click", function () { // //alert($(this).parent("li").attr(‘lay-id‘)); // element.tabDelete("demo", $(this).parent("li").attr(‘lay-id‘)); // }), element.tabChange("demo", r.length - 1); // element.init(); // } // , tabDelete: function (othis) { // //刪除指定Tab項 // element.tabDelete(‘demo‘, ‘44‘); //刪除:“商品管理” // othis.addClass(‘layui-btn-disabled‘); // } // , tabChange: function () { // //切換到指定Tab項 // element.tabChange(‘demo‘, ‘22‘); //切換到:用戶管理 // } //}; //$(‘.site-demo-active‘).on(‘click‘, function () { // var othis = $(this), type = othis.data(‘type‘); // active[type] ? active[type].call(this, othis) : ‘‘; //}); ////Hash地址的定位 //var layid = location.hash.replace(/^#demo=/, ‘‘); //element.tabChange(‘demo‘, layid); //console.log(element.tabChange(‘demo‘, layid)); //element.on(‘tab(demo)‘, function (elem) { // location.hash = ‘demo=‘ + $(this).attr(‘lay-id‘); //}); //顯示與隱藏左側導航 $(‘.zoom-suofang‘).on(‘click‘, function () { var sideWidth = $(‘.layui-bg-black‘).width(); if (sideWidth === 200) { $(‘.layui-body‘).animate({ left: ‘0px‘ }); $(‘.layui-footer‘).animate({ left: ‘0px‘ }); $(‘.layui-bg-black‘).animate({ width: ‘0px‘ }); $(‘.zoom-suofang‘)[0].className = ‘layui-icon zoom-suofang layui-icon-spread-left‘; } else { $(‘.layui-body‘).animate({ left: ‘200px‘ }); $(‘.layui-footer‘).animate({ left: ‘200px‘ }); $(‘.layui-bg-black‘).animate({ width: ‘200px‘ }); $(‘.zoom-suofang‘)[0].className = ‘layui-icon zoom-suofang layui-icon-shrink-right‘; } }); //模擬F11全屏 var bool = true; $(‘.size-da-xiao‘).on(‘click‘, function () { if (bool) { var docElm = document.documentElement; var msg = ‘按F11或Esc即可退出全屏‘; //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } //Chrome等 else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } //IE11 else if (docElm.msRequestFullscreen) {//ie兼容性不太好所以先不使用 //docElm.msRequestFullscreen(); msg = ‘ie兼容性不太好所以先不使用‘; } layer.msg(msg); bool = false; } else { var exitMethod = document.exitFullscreen || //W3C document.mozCancelFullScreen || //Chrome等 document.webkitExitFullscreen || //FireFox document.webkitExitFullscreen; //IE11 if (exitMethod) { exitMethod.call(document); } else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } bool = true; } }); //自定義左側導航數據 var navtab = [ { title: ‘一級標題1‘, icon: ‘‘, open: true, son: [ { id:11, title: ‘百度‘, icon: ‘‘, href: ‘http://www.baidu.com‘ }, { id:12, title: ‘好123‘, icon: ‘‘, href: ‘http://www.hao123.com‘ }, ] }, { title: ‘一級標題2‘, icon: ‘‘, open: false, son: [ { id:21, title: ‘博客園‘, icon: ‘‘, href:‘https://www.cnblogs.com/‘}, { id:22, title: ‘CSDN‘, icon: ‘‘, href: ‘https://www.csdn.net/‘} ] } ]; //左側導航生成方法 var getHtml = function (obj) { var htm = ‘<ul class="layui-nav layui-nav-tree" lay-filter="test">‘; for (var i = 0; i < obj.length; i++) { if (obj[i].son.length > 0) {//二級不為空 htm += obj[i].open ? ‘<li class="layui-nav-item layui-nav-itemed">‘ : ‘<li class="layui-nav-item">‘; htm += ‘<a href="javascript:;">‘ + obj[i].title + ‘</a><dl class="layui-nav-child">‘; for (var j = 0; j < obj[i].son.length; j++) { htm += ‘<dd class="nav-click" data-id="‘ + obj[i].son[j].id + ‘" data-title="‘ + obj[i].son[j].title + ‘" data-href="‘ + obj[i].son[j].href + ‘" data-icon="‘ + obj[i].son[j].icon + ‘" data-type="tabAdd" ><a href="javascript:;"><i class="layui-icon" style="font-size: 20px; color: #ffffff;">‘ + obj[i].son[j].icon + ‘</i> ‘ + obj[i].son[j].title + ‘</a></dd>‘; } htm += ‘</dl></li>‘; } } htm += ‘</ul>‘; return htm; } $(‘#admin-scroll‘).html(getHtml(navtab)); element.init();//更新渲染 var $content = $(‘.layui-body‘);//用來獲取高度 //iframe自適應 $(window).on(‘resize‘, function () { $content.find(‘iframe‘).each(function () { $(this).height($content.height() - 50); }); }).resize(); //只展開一個二級菜單 $(‘.layui-bg-black‘).find(‘li.layui-nav-item‘).each(function () { $(this).on(‘click‘, function () { $(this).siblings().removeClass(‘layui-nav-itemed‘); }); }); //觸發事件 var active = { tabAdd: function (othis) { //新增一個Tab項 element.tabAdd(‘demo‘, { title: ‘<i class="layui-icon">‘ + othis.data(‘icon‘) + ‘</i>‘ + othis.data(‘title‘) + ‘<i class="layui-icon layui-unselect layui-tab-close">?</i>‘ , content: ‘<iframe src="‘ + othis.data(‘href‘) +‘" style="width:100%;height:‘ + ($content.height() - 50) + ‘px;" frameborder="0"></iframe>‘ , id: othis.data(‘id‘) }); //增加點擊關閉事件 var r = $(".layui-tab-title").find("li"); //每次新打開tab都是最後一個,所以只對最後一個tab添加點擊關閉事件 r.eq(r.length - 1).children("i").on("click", function () { element.tabDelete("demo", $(this).parent("li").attr(‘lay-id‘)); }), element.tabChange("demo", othis.data(‘id‘)); othis[0].dataset.type = ‘tabChange‘;//打開過後將data-type修改為 tabChange 下次點擊就是切換了 console.log(othis); element.init(); } , tabChange: function (othis) { //切換到指定Tab項 element.tabChange(‘demo‘, othis.data(‘id‘)); //切換到 } }; //左側導航點擊監聽 $(‘.nav-click‘).on(‘click‘, function () { var othis = $(this), type = othis[0].dataset.type; active[type] ? active[type].call(this, othis) : ‘‘; }); }); </script> </body> </html>
往日只是逛逛博客園看看大神神作,無奈水平有限,大部分註釋沒有,要麽就一點,很難理解。
記性一項不好的我只能將寫有大部分註釋的代碼貼在這裏,以免後面忘了當初怎麽寫的(大部分還是東復制西粘貼)
Layui 寫一個簡單的後臺頁面