サマリー：部分代碼：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &n
部分代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后臺(tái)管理系統(tǒng)HOME頁(yè)面</title>
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<script type="text/javascript" src="static/layui/layui.js"></script>
<style type="text/css">
*{padding:0px;margin: 0px;}
.header{height: 50px;width: 100%;background: #2E6DA4;color: #fff;line-height: 50px;}
.title{font-size: 20px;margin-left: 20px;}
.useinfo{float: right;font-size: 15px;margin-right: 10px;}
.useinfo a{color: #fff;text-decoration: none;}
.menu{width:200px;background: #333744;position: absolute;}
.layui-collapse{border:none;}
.layui-colla-item {border-top:none;}
.layui-colla-title{background: #42485b;color: #fff;}
.layui-colla-content{border-top: none;padding: 0px;}
.main{position: absolute;left: 200px;right: 0px;}
</style>
</head>
<body>
<!-- 頭部 -->
<div>
<span>JD--后臺(tái)管理</span>
<span>admin【系統(tǒng)管理員】 <span><a href="javascript:;" onclick="logoout()">退出</a></span></span>
</div>
<!-- 側(cè)邊欄 -->
<div id="menu">
<div lay-accordion>
<div>
<h2>管理員管理</h2>
<div class="layui-colla-content layui-show">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="admin.html" onclick="menuFlie(this)">管理員列表</a>
</li>
</ul>
</div>
</div>
<div>
<h2>權(quán)限管理</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="menu.html" onclick="menuFlie(this)">菜單管理</a>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="adminManage.html" onclick="menuFlie(this)">角色管理</a>
</li>
</ul>
</div>
</div>
<div>
<h2>系統(tǒng)設(shè)置</h2>
<div class="layui-colla-content ">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="shopName.html" onclick="menuFlie(this)">網(wǎng)站設(shè)置</a>
</li>
</ul>
</div>
</div>
<div>
<h2>商品分類(lèi)</h2>
<div class="layui-colla-content ">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="category.html" onclick="menuFlie(this)">分類(lèi)列表</a>
</li>
</ul>
</div>
</div>
<div>
<h2>產(chǎn)品管理</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="product.html" onclick="menuFlie(this)">產(chǎn)品列表</a>
</li>
</ul>
</div>
</div>
<div>
<h2>幻燈片管理</h2>
<div class="layui-colla-content ">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;"src="first.html" onclick="menuFlie(this)">首頁(yè)首屏</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 主操作頁(yè)面 -->
<div>
<iframe src="welcome.html" onload="resetMainHeight(this)" frameborder="0" style="width: 100%;height: 100%;" scrolling="0"></iframe>
</div>
<script>
layui.use(['element', 'layer'], function(){
var element = layui.element;
var layer = layui.layer;
$=layui.jquery;
resetMenuHeight();
});
function logoout(){
layer.confirm('確認(rèn)退出嗎？', {
icon:3,
btn: ['確認(rèn)', '取消'] //可以無(wú)限個(gè)按鈕
}, function(index, layero){
//按鈕【按鈕一】的回調(diào)
}, function(index){
//按鈕【按鈕二】的回調(diào)
});
}
//重新設(shè)置菜單容器高度
function resetMenuHeight(obj){
var height=document.documentElement.clientHeight-50;
$('#menu').height(height)
}
//菜單點(diǎn)擊
function menuFlie(obj){
//獲取url
var src=$(obj).attr('src');
//改變框架內(nèi)的頁(yè)面
$('iframe').attr('src',src);
}
//設(shè)置主操作頁(yè)面的高度
function resetMainHeight(obj){
var height=parent.document.documentElement.clientHeight-50;
$(obj).parent('div').height(height)
}
</script>
</body>
</html>
總結(jié)：
layui的常用頁(yè)面元素有：按鈕，表格，表單
layui框架的搭建難點(diǎn)是在js函數(shù)的調(diào)用
運(yùn)用的js功能函數(shù)：
設(shè)置主操作頁(yè)面的高度；獲取瀏覽器窗口的位置（文檔位置）；顯示預(yù)覽圖片。
添削の先生：滅絕師太添削時(shí)間：2019-01-04 09:18:03
先生のまとめ：總的來(lái)說(shuō)，layui還是比較簡(jiǎn)單的，熟悉組件，會(huì)看文檔，結(jié)合之前學(xué)習(xí)js,jq,效果更好！