1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6 <title>layout 后台大布局 - Layui</title> 7 <link rel="stylesheet" href="src/css/layui.css"> 8 </head> 9 <style> 10 #colcse li a:hover{background:#009688;color:#fff;} 11 </style> 12 <body class="layui-layout-body"> 13 <div class="layui-layout layui-layout-admin"> 14 <div class="layui-header"> 15 <div class="layui-logo" >layui 后台布局</div> 16 <!-- 頭部區域（可配合layui已有的水平導航） --> 17 <ul class="layui-nav layui-layout-left"> 18 <li class="layui-nav-item"><a href="">控制台</a></li> 19 <li class="layui-nav-item"><a href="">商品管理</a></li> 20 <li class="layui-nav-item"><a href="">用戶</a></li> 21 <li class="layui-nav-item"> 22 <a href="javascript:;">其它系統</a> 23 <dl class="layui-nav-child"> 24 <dd><a href="">郵件管理</a></dd> 25 <dd><a href="">消息管理</a></dd> 26 <dd><a href="">授權管理</a></dd> 27 </dl> 28 </li> 29 </ul> 30 <ul class="layui-nav layui-layout-right"> 31 <li class="layui-nav-item"> 32 <a href="javascript:;"> 33 <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 34 賢心 35 </a> 36 <dl class="layui-nav-child"> 37 <dd><a href="">基本資料</a></dd> 38 <dd><a href="">安全設置</a></dd> 39 </dl> 40 </li> 41 <li class="layui-nav-item"><a href="">退了</a></li> 42 </ul> 43 </div> 44 45 <div class="layui-side layui-bg-black"> 46 <div class="layui-side-scroll"> 47 <!-- 左側導航區域（可配合layui已有的垂直導航） --> 48 <ul class="layui-nav layui-nav-tree" lay-filter="test"> 49 <li class="layui-nav-item layui-nav-itemed"> 50 <a class="" href="javascript:;">所有商品</a> 51 <dl class="layui-nav-child"> 52 <dd> 53 <a data-url="a" data-id="99" data-title="列表一" href="#" class="site-demo-active" data-type="ltabAdd">列表一</a> 54 </dd> 55 <dd> 56 <a data-url="a" data-id="88" data-title="列表二" href="#" class="site-demo-active" data-type="ltabAdd">列表二</a> 57 </dd> 58 <dd> 59 <a data-url="a" data-id="77" data-title="列表三" href="#" class="site-demo-active" data-type="ltabAdd">列表三</a> 60 </dd> 61 <dd> 62 <a data-url="a" data-id="66" data-title="列表四" href="#" class="site-demo-active" data-type="ltabAdd">列表四</a> 63 </dd> 64 </dl> 65 </li> 66 <li class="layui-nav-item "> 67 <a href="javascript:;">解決方案</a> 68 <dl class="layui-nav-child"> 69 <dd><a href="javascript:;">列表一</a></dd> 70 <dd><a href="javascript:;">列表二</a></dd> 71 <dd><a href="">超鏈接</a></dd> 72 </dl> 73 </li> 74 <li class="layui-nav-item"><a href="">雲市場</a></li> 75 <li class="layui-nav-item"><a href="">發布商品</a></li> 76 </ul> 77 </div> 78 </div> 79 80 <div class="layui-body" style="background-color: #FFFCF5;"> 81 <!-- 內容主體區域 --> 82 <div> 83 84 <div id="colcse" class="layui-tab" lay-filter="demo" lay-allowclose="true" > 85 <ul class="layui-tab-title"> 86 <!-- 87 作者：1669056669@qq.com 88 時間：2018-12-24 89 描述：存放tab 90 --> 91 </ul> 92 <!-- 93 作者：1669056669@qq.com 94 時間：2018-12-24 95 描述：tab右鍵功能 96 --> 97 <ul class="rightmenu" style=" display: none;position: absolute;background: #6E6C79;font-family: '微軟雅黑';"> 98 <li id="yue" style="color: red;cursor:pointer;" data-id="" data-type="closethis"> 99 <a href="#" id="colcse" style="color: white;cursor:pointer;" data-type="closethis" > 關閉當前 </a> 100 </li> 101 102 <li data-type="closeall"> 103 <a href="#" id="colcse" style="color: white;cursor:pointer;" data-id="" data-type="closeall"> 關閉所有 </a> 104 </li> 105 106 <li data-type="closeothe"> 107 <a href="#" id="colcse" style="color: white;cursor:pointer;" data-id="" data-type="closeothe"> 關閉其它 </a> 108 </li> 109 </ul> 110 <div class="layui-tab-content"> 111 </div> 112 </div> 113 114 </div> 115 </div> 116 117 <div id="test1" data-id = "test" class="layui-panel-window"> 118 <input class="layui-table-box" title="9999999" /> 119 </div> 120 121 <div class="layui-footer"> 122 <!-- 底部固定區域 --> 123 ©layui - 底部固定區域 124 </div> 125 126 </div> 127 <script src="src/layui.js" charset="utf-8"></script> 128 <!-- 注意：如果你直接復制所有代碼到本地，上述js路徑需要改成你本地的 --> 129 <script> 130 131 var ids=0; 132 layui.use('element', function(){ 133 var $ = layui.jquery 134 ,element = layui.element; //Tab的切換功能，切換事件監聽等，需要依賴element模塊 135 136 //觸發事件 137 var active = { 138 tabAdd: function(){ 139 //新增一個Tab項 140 element.tabAdd('demo', { 141 title: '新選項'+ (Math.random()*1000|0) //用於演示 142 ,content: '內容'+ (Math.random()*1000|0) 143 ,id: new Date().getTime() //實際使用一般是規定好的id，這里以時間戳模擬下 144 }) 145 } 146 ,tabDelete: function(id){ 147 //刪除指定Tab項 148 149 element.tabDelete('demo', id); //刪除：“商品管理” 150 ids=0; 151 //othis.addClass('layui-btn-disabled'); 添加樣式 152 },tabDeleteAll: function(idss){ 153 $.each(idss, function(i,item) { 154 element.tabDelete('demo', item); //刪除所有 155 }); 156 ids =0; 157 } 158 ,tabChange: function(id){ 159 //切換到指定Tab項 160 element.tabChange('demo', id); //切換到：用戶管理 161 },ltabAdd:function(url,id,name){ 162 //新增一個Tab項 傳入三個參數，分別對應其標題，tab頁面的地址，還有一個規定的id，是標簽中data-id的屬性值 163 //關於tabAdd的方法所傳入的參數可看layui的開發文檔中基礎方法部分 164 element.tabAdd('demo', { 165 title: name, 166 content: '<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'.html" style="width:100%;height:99%;"></iframe>', 167 id: id //規定好的id 168 }) 169 CustomRightClick(id); //給tab綁定右擊事件 170 FrameWH(); //計算ifram層的大小 171 172 } 173 }; 174 175 //當點擊有site-demo-active屬性的標簽時，即左側菜單欄中內容 ，觸發點擊事件 176 $('.site-demo-active').on('click', function() { 177 var dataid = $(this); 178 //這時會判斷右側.layui-tab-title屬性下的有lay-id屬性的li的數目，即已經打開的tab項數目 179 if ($(".layui-tab-title li[lay-id]").length <= 0) { 180 //如果比零小，則直接打開新的tab項 181 active.ltabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title")); 182 } else { 183 //否則判斷該tab項是否以及存在 184 185 var isData = false; //初始化一個標志，為false說明未打開該tab項 為true則說明已有 186 $.each($(".layui-tab-title li[lay-id]"), function () { 187 //如果點擊左側菜單欄所傳入的id 在右側tab項中的lay-id屬性可以找到，則說明該tab項已經打開 188 if ($(this).attr("lay-id") == dataid.attr("data-id")) { 189 isData = true; 190 } 191 }) 192 if (isData == false) { 193 //標志為false 新增一個tab項 194 active.ltabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title")); 195 } 196 } 197 //最后不管是否新增tab，最后都轉到要打開的選項頁面上 198 active.tabChange(dataid.attr("data-id")); 199 }); 200 //Hash地址的定位 201 var layid = location.hash.replace(/^#test=/, ''); 202 element.tabChange('test', layid); 203 204 element.on('tab(test)', function(elem){ 205 location.hash = 'test='+ $(this).attr('lay-id'); 206 }); 207 208 function FrameWH() { 209 var h = $(window).height() -41- 10 - 60 -10-44 -10; 210 $("iframe").css("height",h+"px"); 211 } 212 213 $(window).resize(function () { 214 FrameWH(); 215 }) 216 217 218 function CustomRightClick(id) { 219 //取消右鍵 rightmenu屬性開始是隱藏的 ，當右擊的時候顯示，左擊的時候隱藏 220 $('.layui-tab-title li').on('contextmenu', function () { return false; }) 221 $('.layui-tab-title,.layui-tab-title li').click(function () { 222 $('.rightmenu').hide(); 223 ids=0; 224 }); 225 226 //桌面點擊右擊 227 $('.layui-tab-title li').on('contextmenu', function (e) { 228 229 var popupmenu = $(".rightmenu"); 230 ids +=1; 231 if(ids >1){ 232 return true; 233 } 234 popupmenu.find("li").attr("data-id",id); //在右鍵菜單中的標簽綁定id屬性 235 236 //判斷右側菜單的位置 237 l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX; 238 t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY; 239 240 popupmenu.css({ left: l-190, top: t-50 }).show(); //進行絕對定位 241 //alert("右鍵菜單") 242 return false; 243 }); 244 } 245 $(".rightmenu li").click(function () { 246 //右鍵菜單中的選項被點擊之后，判斷type的類型，決定關閉所有還是關閉當前。 247 if ($(this).attr("data-type") == "closethis") { 248 //如果關閉當前，即根據顯示右鍵菜單時所綁定的id，執行tabDelete 249 250 active.tabDelete($(this).attr("data-id")); 251 } else if ($(this).attr("data-type") == "closeall") { 252 var tabtitle = $(".layui-tab-title li"); 253 var ids = new Array(); 254 $.each(tabtitle, function (i) { 255 ids[i] = $(this).attr("lay-id"); 256 }) 257 //如果關閉所有 ，即將所有的lay-id放進數組，執行tabDeleteAll 258 active.tabDeleteAll(ids); 259 }else if($(this).attr("data-type") =="closeothe"){ 260 var id =$(this).attr("data-id"); 261 var tabtitle = $(".layui-tab-title li"); 262 var ids = new Array(); 263 $.each(tabtitle, function (i) { 264 if(id != $(this).attr("lay-id")){ 265 ids[i] = $(this).attr("lay-id"); 266 } 267 }) 268 active.tabDeleteAll(ids); 269 } 270 271 $('.rightmenu').hide(); //最后再隱藏右鍵菜單 272 }) 273 274 }); 275 </script> 276 </body> 277 </html>
