layui開發管理後臺比較快捷和簡單,但真正做的很好也並不是很容易,這裏總結一下,後臺所必備的幾個大的元素:
1、header 頁頭
2、side 邊框
3、body 頁體
4、footer 頁腳
5、navbar 邊框二級菜單
前面4個是layui的基本樣式,用layui很容易實現,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>祝好</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="js/index.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">
通用管理系統
</div>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">系統管理</li>
<li class="layui-nav-item">用戶</li>
<li class="layui-nav-item">退出</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll" id="admin-navbar-side" lay-filter="side"></div>
</div>
<div class="layui-body">
主內容
</div>
<div class="layui-footer">
頁腳 @
</div>
</div>
</body>
</html>
<script>
</script>
比較難的是上面第5條的navbar怎樣實現呢?
可以直接用layui-nav layui-nav-tree layui-nav-item layui-nav-child 進行實現,
但不是太好,因爲動態獲取麻煩些,而且代碼不好控。
於是,這裏採用包裝好的navbar.js,進行實現。
核心代碼如下:
//設置navbar
navbar.set({
spreadOne: true,
elem: '#admin-navbar-side',
cached: true,
data: navs,
});
//渲染navbar
navbar.render();
其中render()中生成html文件。