layui這個前端框架對後端職員來講供應了極大的輕易，很大一部份同硯在剛接觸到這個框架就如飢似渴的要着手實踐了，恰好近來須要開闢一個背景治理項目，就拿layui來舉行進修和實踐．
還沒有接觸到的同硯能夠先通讀一遍文檔，如許在遇到問題的時刻才能夠對症下藥，細緻研討相干的板塊
本日我們先來進修一下運用layui來完成左邊點擊菜單，內容區顯現tab
試驗結果
完成歷程
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><?php echo $curTitle;?></title>
<link rel="stylesheet" href="js/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">XXXX營業治理平台</div>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
歡迎光臨，商戶001
</li>
<li class="layui-nav-item"><a href="">平安退出</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左邊垂直導航地區-->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item">
<a class="" href="javascript:;">治理員治理</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;" data-id="1" data-title="治理員列表" data-url="index.php?&a=adminList"
class="site-demo-active" data-type="tabAdd">治理員列表</a></dd>
<dd><a href="javascript:;" data-id="2" data-title="治理員日記" data-url="index.php?&a=adminLogList"
class="site-demo-active" data-type="tabAdd">治理員日記</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">生意業務治理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" data-id="" data-id="3" data-title="存款列表"
data-url="index.php?&a=adminList" class="site-demo-active" data-type="tabAdd">存款列表</a>
</dd>
<dd><a href="javascript:;">代付列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">系統治理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">付出API設置</a></dd>
<dd><a href="javascript:;">通告設置</a></dd>
<dd><a href="javascript:;">控制台</a></dd>
</li>
</ul>
</div>
</div>
<!--tab標籤-->
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
<ul class="layui-tab-title"></ul>
<div class="layui-tab-content"></div>
</div>
<div class="layui-footer" style="text-align:center;">
<!-- 底部牢固地區 -->
© sunway.tk XXXX營業治理平台
</div>
</div>
<script src="/js/layui/layui.js"></script>
<script>
<!--這裡是安排js代碼地區-->
</script>
</body>
</html>javascript代碼：
layui.use(['element', 'layer', 'jquery'], function () {
var element = layui.element;
// var layer = layui.layer;
var $ = layui.$;
// 設置tab實踐鄙人面沒法獲取到菜單元素
$('.site-demo-active').on('click', function () {
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項 為true則申明已有
$.each($(".layui-tab-title li[lay-id]"), function () {
//假如點擊左邊菜單欄所傳入的id 在右邊tab項中的lay-id屬性能夠找到，則申明該tab項已翻開
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"));
}
}
//末了不論是不是新增tab，末了都轉到要翻開的選項頁面上
active.tabChange(dataid.attr("data-id"));
});
var active = {
//在這裏給active綁定幾項事宜，背面可通過active挪用這些事宜
tabAdd: function (url, id, name) {
//新增一個Tab項 傳入三個參數，離別對應其題目，tab頁面的地點，另有一個劃定的id，是標籤中data-id的屬性值
//關於tabAdd的要領所傳入的參數可看layui的開闢文檔中基本要領部份
element.tabAdd('demo', {
title: name,
content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
id: id //劃定好的id
})
FrameWH(); //盤算ifram層的大小
},
tabChange: function (id) {
//切換到指定Tab項
element.tabChange('demo', id); //依據傳入的id傳入到指定的tab項
},
tabDelete: function (id) {
element.tabDelete("demo", id);//刪除
}
};
function FrameWH() {
var h = $(window).height();
$("iframe").css("height",h+"px");
}
});完成邏輯：動態推斷所點擊的菜單元素，應用元素上設置的data屬性值，在右邊內容區天生頁面iframe舉行動態顯現
參考文獻：layui官網
