layui的側邊欄的使用
阿新 • • 發佈：2018-11-05
不多bb，直接上程式碼
html的程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>後臺管理介面-電影推酷網</title> <link rel="icon" href="/static/images/angryBird.ico" /> <link rel="stylesheet" href="/static/layui/css/layui.css"> <link rel="stylesheet" href="/static/csss/index.css"> <script src="/static/layui/layui.js"></script> <script src="/static/js/jquery.js"></script> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header header header-demo"> <a class="logo"> <img src="../static/images/logo1.png" style="width: 200px;height: 60px;padding:0 -15px!important;"/> </a> <ul class="layui-nav layui-layout-right" lay-filter="header-right"> <li class="layui-nav-item"lay-unselect> <a href="javascript:;"> <cite id="manager">管理員</cite> </a> <dl class="layui-nav-child"> <dd><a lay-href="set/user/info.html">基本資料</a></dd> <dd><a lay-href="set/user/password.html">修改密碼</a></dd> <hr> <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd> </dl> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">導航選單</a> <dl class="layui-nav-child"> <dd><a href="#" class="site-demo-active" data-url="addFilm.html" data-id="1" data-title="新增電影資訊"> <i class="layui-icon layui-icon-add-circle"></i> 新增電影資訊 </a> </dd> <dd><a href="#" class="site-demo-active" data-url="infoManage.html" data-id="2" data-title="電影動態管理"> <i class="layui-icon layui-icon-add-circle"></i> 電影動態管理</a> </dd> <dd><a href="#" class="site-demo-active" data-url="filmManage.html" data-id="3" data-title="電影資訊管理"> <i class="layui-icon layui-icon-add-circle"></i> 電影資訊管理</a> </dd> <dd><a href="#" class="site-demo-active" data-url="webSiteManage.html" data-id="4" data-title="網址資訊管理"> <i class="layui-icon layui-icon-add-circle"></i> 網址資訊管理</a> </dd> <dd><a href="#" class="site-demo-active" data-url="linkManager.html" data-id="5" data-title="友情連結管理"> <i class="layui-icon layui-icon-add-circle"></i> 友情連結管理</a> </dd> <dd><a href="javascript:logout()"> <i class="layui-icon layui-icon-add-circle"></i> 安全退出</a> </dd> </dl> </li> </ul> </div> </div> <div class="layui-tab layui-tab-brief " lay-filter="demo" lay-allowClose="true"> <ul class="layui-tab-title site-demo-title"> <li class="layui-this" lay-id="111"><i class="layui-icon layui-icon-home"></i>首頁</li> </ul> <div class="layui-body layui-tab-content site-demo site-demo-body"> <div class="layui-tab-item layui-show"> <div style="text-align: center;padding-top: 100px"> <strong style="color: red;font-size: 50px">歡迎使用</strong> </div> </div> </div> </div> <div class="layui-footer footer footer-demo"> 重構電影推酷網後臺管理介面 </div> </div> <script src="/static/js/index.js"></script> <script> /*<![CDATA[*/ function logout() { layer.confirm('您確定要退出系統嗎？',{ btn:['確定','取消'] }, function () { window.location.href="/logout"; }); } </script> </body> </html>
css的程式碼
body{
line-height: 24px;
font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
}
.header-demo{
height: 60px;
border-bottom: none;
}
.site-demo-title{
position: fixed;
left: 200px;
right: 0;
top: 65px;
}
body .layui-layout-admin .site-demo{
bottom: 60px;
padding: 0;
}
.layui-layout-admin .site-demo-body{
top: 106px;
}
.footer{
text-align: center;
font-weight: 300;
color: #666666;
}
#manager{
color: white;
}
重點來了，js的程式碼：
layui.use(['element','layer'],function () { var element = layui.element; var layer = layui.layer; //觸發事件 var active = { tabAdd: function (url,id,name) { element.tabAdd('demo',{ title:name, content: '<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="/admin/'+url+'" style="width:100%;height:99%;"></iframe>', id:id }); // CustomRightClick(id); // FrameWH();//計算iframe層的大小 }, tabChange:function (id) { element.tabChange('demo',id); }, tabDelete:function (id) { element.tabDelete('demo',id); } }; //當點選site-demo-active屬性的標籤時，即左側選單欄中的內容，觸發事件 $(".site-demo-active").on('click',function () { console.log("11111111"); var dataid = $(this); //這時候要判斷右側的.layui-tab-title屬性下的lay-id的li的數目，已經開啟的tab的數量 if($(".layui-tab-title li[lay-id]").length<= 0){ //比零小，則直接開啟新的tab項 active.tabAdd(dataid.attr("data-url"),dataid.attr("data-id"),dataid.attr("data-title")); }else{ //判斷該tab項是否以及存在 var isData = false;//初始化一個標誌，為false說明未開啟該tab項 $.each($(".layui-tab-title li[lay-id]"),function () { if($(this).attr("lay-id") === dataid.attr("data-id")){ isData = true; } }); if (isData === false){ //標誌為false，新增一個tab active.tabAdd(dataid.attr("data-url"),dataid.attr("data-id"),dataid.attr("data-title")); } } active.tabChange(dataid.attr("data-id")); }); });
js就實現了，切換的功能，很簡陋，等有空了再加點功能