1.前端代碼
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <link href="~/Content/layui/css/layui.css" rel="stylesheet"/> <title>LayUI后台</title> <style> .rightmenu { position: absolute; width: 80px; z-index: 9999; display: none; background-color: #fff; padding: 2px; color: #333; border: 1px solid #eee; border-radius: 2px; cursor: pointer; } .rightmenu li { text-align: center; display: block; height: 25px; line-height: 25px; } .rightmenu li:hover { background-color: #666; color: #fff; } </style> </head> <body> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">layui 后台布局</div> <!-- 頭部區域（可配合layui已有的水平導航） --> <ul class="layui-nav layui-layout-left"> <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="">用戶</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="~/Student2/LogOut">退了</a></li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左側導航區域（可配合layui已有的垂直導航） --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">所有商品</a> <dl class="layui-nav-child"> <dd><a class="site-active" tab-name="學生列表A" tab-url="/Demo/StudentTab" tab-layid="11" href="javascript:;">學生列表A</a></dd> <dd><a class="site-active" tab-name="學生列表B" tab-url="/Student2/Student2Tab" tab-layid="22" href="javascript:;">學生列表B</a></dd> <dd><a class="site-active" tab-name="學生列表C" tab-url="/Student2/Student2Tab" tab-layid="33" href="javascript:;">學生列表C</a></dd> <dd><a class="site-active" tab-name="學生列表D" tab-url="/Student2/Student2Tab" tab-layid="44" href="javascript:;">學生列表D</a></dd> <dd><a class="site-active" tab-name="學生列表E" tab-url="/Student2/Student2Tab" tab-layid="55" href="javascript:;">學生列表E</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">解決方案</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">列表一</a></dd> <dd><a href="javascript:;">列表二</a></dd> <dd><a href="">超鏈接</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">雲市場</a></li> <li class="layui-nav-item"><a href="">發布商品</a></li> </ul> </div> </div> <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;"> <ul class="layui-tab-title"> </ul> <ul class="rightmenu"> <li data-type="closeOther">關閉其他</li> <li data-type="closeall">關閉所有</li> </ul> <div class="layui-tab-content"></div> </div> <div class="layui-body"> <!-- 內容主體區域 --> <div layui-body style="padding: 15px;"> <div class="layui-tab" lay-allowClose="true" lay-filter="tabList"> <ul class="layui-tab-title"> </ul> <div class="layui-tab-content"> </div> </div> </div> </div> <div class="layui-footer"> <!-- 底部固定區域 --> © layui.com - 底部固定區域 </div> </div> <script src="~/Content/layui/layui.js"></script> <script> //JavaScript代碼區域 layui.use(['element', 'jquery'], function () { var element = layui.element, $ = layui.jquery; var deleteIndex;//全局變量 element.on('tab(tabList)', function(data){ deleteIndex=$(this).attr("lay-id"); }); //觸發事件 var active = { tabAdd: function (name, url, layid) { element.tabAdd('tabList', { title: name //'選項卡的標題' , content: '<iframe id="iframeMain" style="width: 100%" ; height="100%" ; scrolling="no" frameborder="no" src="' + url + '"></iframe>'//'選項卡的內容' //支持傳入html , id: layid//'選項卡標題的lay-id屬性值' }); CustomRightClick(layid); //給tab綁定右擊事件 FrameWH(); }, tabChange: function (layid) { element.tabChange('tabList', layid); }, tabDelete: function (layid) { element.tabDelete('tabList', layid); }, tabDeleteAll: function(ids) { $.each(ids, function(i, item) { element.tabDelete("tabList", item); }); } } //當點擊有siteactive屬性的標簽時，即左側菜單欄中內容 ，觸發點擊事件 $('.site-active').on("click", function () { var dataid = $(this); var name = dataid.attr("tab-name"); var url = dataid.attr("tab-url"); var tab_layid = dataid.attr("tab-layid"); //1、 判斷tab-layid=layid的tab頁是否打開 if ($(".layui-tab-title li[lay-id]").length <= 0) { //1.1 初始狀態：1個Tab頁也沒有打開 active.tabAdd(name, url, tab_layid); //打開tab頁 active.tabChange(tab_layid)//轉到該tab頁 } else { //1.2 判斷該Tab頁是否已打開 var isData = false; //初始化一個標志，為false說明未打開該tab項 為true則說明已有 $.each($(".layui-tab-title li[lay-id]"), function() { //如果點擊左側菜單欄所傳入的id 在右側tab項中的lay-id屬性可以找到，則說明該tab項已經打開 if ($(this).attr("lay-id") == tab_layid) { isData = true; } }); if (isData == false) { //標志為false 新增一個tab項 active.tabAdd(name, url, tab_layid); //1.2.1 該Tab頁未打開，則打開該tab頁 } active.tabChange(tab_layid)//1.2.2 轉到該tab頁 } FrameWH(); //計算ifram層的大小 }); function CustomRightClick(id) { //取消右鍵 rightmenu屬性開始是隱藏的 ，當右擊的時候顯示，左擊的時候隱藏 $('.layui-tab-title li').on('contextmenu', function() { return false; }); $('.layui-tab-title,.layui-tab-title li').click(function () { $('.rightmenu').hide(); }); //桌面點擊右擊 $('.layui-tab-title li').on('contextmenu', function (e) { var popupmenu = $(".rightmenu"); popupmenu.find("li").attr("data-id", id); //在右鍵菜單中的標簽綁定id屬性 //判斷右側菜單的位置 l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX; t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY; popupmenu.css({ left: l, top: t }).show(); //進行絕對定位 //alert("右鍵菜單") return false; }); } $(".rightmenu li").click(function() { if ($(this).attr("data-type") == "closeOther") {//關閉其他 $.each($(".layui-tab-title li[lay-id]"), function () { //如果點擊左側菜單欄所傳入的id 在右側tab項中的lay-id屬性可以找到，則說明該tab項已經打開 if ($(this).attr("lay-id")!=deleteIndex) { console.log("即將刪除lay-id"+$(this).attr("lay-id")); active.tabDelete($(this).attr("lay-id")); } }); } else if ($(this).attr("data-type") == "closeall") {//關閉所有 var tabtitle = $(".layui-tab-title li"); var ids = new Array(); $.each(tabtitle, function (i) { ids[i] = $(this).attr("lay-id"); }); active.tabDeleteAll(ids); } $('.rightmenu').hide(); }); function FrameWH() { //計算ifram層的大小 var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10; $("iframe").css("height", h + "px"); } $(window).resize(function() { FrameWH(); }); }); </script> </body> </body> </html>
2.界面演示
