【每日進步一點點】layui自制管理後臺核心原理

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文件。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章