今天是2019年小年后一天，還有三天回家過年。
今天記錄一下一種前端頁面的效果的實現，這種效果很常見，一般用於網站后台系統的前端頁面。一般后台系統會分為頂部導航欄，左邊的菜單欄和右邊的主體區。有一種效果是這樣的，當點擊左邊菜單的時候，在右邊的主體區會彈出相應的頁面，點擊多個菜單選項時，在右邊依次陳列這些窗口，這些窗口之間可以相互切換，類似於瀏覽器的多個打開的窗口那樣。
下面，先給出這種效果的圖片：
然后我將詳細記錄實現這個效果的過程。
整體思路：
1.基礎知識
這種效果的實現主要依賴於layui，layui里有一個示例如下：
該示例中，新增Tab項，刪除Tab項和切換Tab 這三個功能的實現代碼如下：
//觸發事件 var active = { tabAdd: function(){ //新增一個Tab項 element.tabAdd('demo', { title: '新選項'+ (Math.random()*1000|0) //用於演示 ,content: '內容'+ (Math.random()*1000|0) ,id: new Date().getTime() //實際使用一般是規定好的id，這里以時間戳模擬下 }) } ,tabDelete: function(othis){ //刪除指定Tab項 element.tabDelete('demo', '44'); //刪除：“商品管理 othis.addClass('layui-btn-disabled'); } ,tabChange: function(){ //切換到指定Tab項 element.tabChange('demo', '22'); //切換到：用戶管理 } };
以上是js部分的部分代碼，完整代碼請訪問layui官網查看，下面對這部分代碼進行簡單的說明：
這部分代碼核心的是這三個方法：
（1）element.tabAdd ：
element.tabAdd('參數一',{
title:'標題'，//也就是打開的新窗口的頂部的文字，如上圖所示的我的桌面
content: '新增界面里的內容' ,//這里可放一個iframe,一邊把外部頁面引入到這里，
id:id //一個數字，是每個打開的界面的唯一標識符
})
上面的代碼詳細詳細寫了每個參數的意思和用途，參數一 是一個類似於 id 的標簽上的屬性值，在layui中這個屬性為 lay-filter="參數一" ，執行上面的方法新增的窗口會被放置在 一個屬性 lay-filter="參數一"的div中。
（2）element.tabDelete('參數一', '參數二')
element.tabDelete('demo', '44');
這很容易理解，參數一是 div的lay-filter屬性值，參數二是某個窗口的id.點擊關閉該id的窗口。
（3）element.tabChange('參數一', '參數二')
同（2），參數一是 div的lay-filter屬性值，參數二是某個窗口的id.點擊切換到該id的窗口。
2.核心實現
在上面三個方法的基礎上，使用js向每個方法傳遞一些可變的參數，就可以實現執行方法，新建/刪除/切換窗口的操作。如下面一段代碼所示：
tabAdd:function(title,url,id){ element.tabAdd('mainTab',{ title: title,// content: '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>', id: id //實際使用一般是規定好的id，這里以時間戳模擬下 }) }
在方法中傳入 title,url和id.
具體實現
下面是具體實現步驟：
（1）搭一個整體頁面的框架 ：
如上圖所示，首先搭一個這樣的頁面框架，這個可以直接從layui官網獲取，獲取戳這里：https://www.layui.com/doc/element/layout.html#admin。
因為本片目的是演示點擊菜單，新增窗口的功能，所以，我盡可能的對界面的設計簡化，左邊菜單，去掉了二級及三級菜單：
下面給出我的html代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</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"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="layui-v2.3.0/layui/css/layui.css" media="all"> <script type="text/javascript" src="layui-v2.3.0/layui/layui.js"></script> <style type="text/css"> .x-iframe{ width: 100%; height: 100%; } .layui-tab-item{ width: 100%; height: 100%; } </style> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-bg-black layui-header"> <div class="layui-logo">layui 后台布局</div> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"><a href="">導航一</a></li> <li class="layui-nav-item layui-this"> <a href="javascript:;">導航二</a> <dl class="layui-nav-child"> <dd><a href="" >選項1</a></dd> <dd><a href="" >選項2</a></dd> <dd><a href="" >選項3</a></dd> </dl> </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> <dd class="layui-this"><a href="">選項四</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">社區</a></li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="">控制台<span class="layui-badge">9</span></a> </li> <li class="layui-nav-item"> <a href="">個人中心<span class="layui-badge-dot"></span></a> </li> <li class="layui-nav-item" lay-unselect=""> <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">修改信息</a></dd> <dd><a href="javascript:;">安全管理</a></dd> <dd><a href="javascript:;">退了</a></dd> </dl> </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"><a _href="./index.html"><cite>列表一</cite></a></li> <li class="layui-nav-item"><a _href="./Home.html"><cite>列表二</cite></a></li> <li class="layui-nav-item"><a _href="./login.html"><cite>列表三</cite></a></li> <li class="layui-nav-item"><a _href="./test_1.html"><cite>列表四</cite></a></li> <li class="layui-nav-item"><a _href="./formCheck.html"><cite>列表五</cite></a></li> <li class="layui-nav-item"><a _href="./柵格.html"><cite>列表六</cite></a></li> </ul> </div> </div> <div class="layui-body"> <!-- 內容主體區域 --> <div class="layui-tab tab" lay-filter="mainTab" lay-allowclose="false" style="height: 100%;"> <ul class="layui-tab-title"> <li class="home"><i class="layui-icon"></i>我的桌面</li> </ul> <div class="layui-tab-content" style="height: 100%;"> <div class="layui-tab-item layui-show" style="height: 100%;"> <iframe src='./Home.html' frameborder="0" scrolling="yes" class="x-iframe"></iframe> </div> </div> </div> </div> <div class="layui-footer"> <!-- 底部固定區域 --> © layui.com - 底部固定區域 </div> </div> </body> </html>
以上代碼可直接復制使用，需要注意，該引用的外部文件不要遺漏。
上面代碼，主要看一下 內容主體區域 部分：
<div class="layui-body"> <!-- 內容主體區域 --> <div class="layui-tab tab" lay-filter="mainTab" lay-allowclose="false" style="height: 100%;">
<ul class="layui-tab-title"> <li class="home"><i class="layui-icon"></i>我的桌面</li> </ul> <div class="layui-tab-content" style="height: 100%;"> <div class="layui-tab-item layui-show" style="height: 100%;"> <iframe src='./Home.html' frameborder="0" scrolling="yes" class="x-iframe"></iframe> </div> </div> </div> </div>
在主體區的div上添加 lay-filter="mainTab" 的屬性，設置新增窗口的顯示位置。其他的按照以上代碼去做即可。
（2）js實現具體的效果
首先，layui的js依賴項和Jquery庫引入不要忘了；
然后，添加layui js使用如下代碼：
layui.use('element', function(){
var element = layui.element;
//下文中的代碼寫在此處
}）
接着，定義對Tab操作的方法：
//點擊新增子頁面 var tab = { tabAdd:function(title,url,id){ element.tabAdd('mainTab',{ title: title, content: '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>', id: id }) }, tabDelete:function(othis){ element.tabDelete('mainTab',id); othis.addClass('layui-btn-disabled'); }, tabChange:function(id){ //切換到指定Tab項 element.tabChange('mainTab', id); //切換到：用戶管理 } };
經過上文的介紹，這部分代碼應當不難看懂，不再贅述。
最后，為每個菜單選項綁定點擊事件：
$(".layui-nav-tree li").click(function(event){
var url = $(this).children('a').attr('_href');
var title = $(this).find('cite').html();
var index = $('.layui-nav-tree li').index($(this));
//遍歷打開的窗口，如果當前點擊的選項已經打開，則跳轉到對應窗口去，不再執行for外面的兩條語句創建新窗口
for (var i = 0; i <$('.x-iframe').length; i++) {
if($('.x-iframe').eq(i).attr('tab-id')==index+1){
tab.tabChange(index+1);
event.stopPropagation();
return;
}
};
tab.tabAdd(title,url,index+1);
tab.tabChange(index+1);
});
需要注意的是，在選項的a標簽上，不要使用href來聲明鏈接，否則會跳轉出去其他頁面，可以寫為 _href ，在js中可根據屬性獲得其鏈接值。
做完以上這些后，就可以實現文初的效果啦，該示例的完整代碼，我貼在下面，同時給出雲盤鏈接，希望對你有幫助。
快要過年了，祝大家新年愉快！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</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"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="layui-v2.3.0/layui/css/layui.css" media="all"> <script type="text/javascript" src="layui-v2.3.0/layui/layui.js"></script> <style type="text/css"> .x-iframe{ width: 100%; height: 100%; } .layui-tab-item{ width: 100%; height: 100%; } </style> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-bg-black layui-header"> <div class="layui-logo">layui 后台布局</div> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"><a href="">導航一</a></li> <li class="layui-nav-item layui-this"> <a href="javascript:;">導航二</a> <dl class="layui-nav-child"> <dd><a href="" >選項1</a></dd> <dd><a href="" >選項2</a></dd> <dd><a href="" >選項3</a></dd> </dl> </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> <dd class="layui-this"><a href="">選項四</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">社區</a></li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="">控制台<span class="layui-badge">9</span></a> </li> <li class="layui-nav-item"> <a href="">個人中心<span class="layui-badge-dot"></span></a> </li> <li class="layui-nav-item" lay-unselect=""> <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">修改信息</a></dd> <dd><a href="javascript:;">安全管理</a></dd> <dd><a href="javascript:;">退了</a></dd> </dl> </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"><a _href="./index.html"><cite>列表一</cite></a></li> <li class="layui-nav-item"><a _href="./Home.html"><cite>列表二</cite></a></li> <li class="layui-nav-item"><a _href="./login.html"><cite>列表三</cite></a></li> <li class="layui-nav-item"><a _href="./test_1.html"><cite>列表四</cite></a></li> <li class="layui-nav-item"><a _href="./formCheck.html"><cite>列表五</cite></a></li> <li class="layui-nav-item"><a _href="./柵格.html"><cite>列表六</cite></a></li> </ul> </div> </div> <div class="layui-body"> <!-- 內容主體區域 --> <div class="layui-tab tab" lay-filter="mainTab" lay-allowclose="false" style="height: 100%;"> <ul class="layui-tab-title"> <li class="home"><i class="layui-icon"></i>我的桌面</li> </ul> <div class="layui-tab-content" style="height: 100%;"> <div class="layui-tab-item layui-show" style="height: 100%;"> <iframe src='./Home.html' frameborder="0" scrolling="yes" class="x-iframe"></iframe> </div> </div> </div> </div> <div class="layui-footer"> <!-- 底部固定區域 --> © layui.com - 底部固定區域 </div> </div> </body> </html> <script type="text/javascript"> $(function(){ //JavaScript代碼區域 layui.use('element', function(){ var element = layui.element; $(".layui-nav-tree li").click(function(event){ var url = $(this).children('a').attr('_href'); var title = $(this).find('cite').html(); var index = $('.layui-nav-tree li').index($(this)); //遍歷打開的窗口，如果當前點擊的選項已經打開，則跳轉到對應窗口去，不再執行for外面的兩條語句，創建新窗口 for (var i = 0; i <$('.x-iframe').length; i++) { if($('.x-iframe').eq(i).attr('tab-id')==index+1){ tab.tabChange(index+1); event.stopPropagation(); return; } }; tab.tabAdd(title,url,index+1); tab.tabChange(index+1); }); //點擊新增子頁面 var tab = { tabAdd:function(title,url,id){ element.tabAdd('mainTab',{ title: title,//用於演示 content: '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>', id: id //實際使用一般是規定好的id，這里以時間戳模擬下 }) }, tabDelete:function(othis){ element.tabDelete('mainTab',id); othis.addClass('layui-btn-disabled'); }, tabChange:function(id){ //切換到指定Tab項 element.tabChange('mainTab', id); //切換到：用戶管理 } }; }); }) </script>
雲盤鏈接：https://pan.baidu.com/s/1ct_fSdLaHFU1CPvd4TRQMA
注意：雲盤中只有html文件，下載后請修改 JQuery , layui的庫文件引用地址為你自己的地址。
我的eMail:3074596466@qq.com
如果對你有用，麻煩點個推薦，哈啊哈，非常感謝！