Layui 寫一個簡單的後臺頁面
阿新 • • 發佈：2018-06-20
觸發 scale item href method pts iframe 都是 rem
參考如下：
1、layui 官方文檔 http://www.layui.com/doc/
2、https://blog.csdn.net/huyanliang/article/details/77966610
3、http://m.zhengjinfan.cn/（演示地址）http://git.oschina.net/besteasyteam/beginner_admin （下載地址）【在這裏學習到原來js可以這麽玩】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>後臺管理</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">
<link href="Scripts/layui/css/layui.css" rel="stylesheet" />
<script src="Scripts/layui/layui.js"></script>
<!-- 註意：如果你直接復制所有代碼到本地，上述css路徑需要改成你本地的 layui v=2.30 -->
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo" style="background-color:#99ffd7;border-bottom:2px solid #028a3f;border-right:2px solid #b102b9;">後臺管理</div>
<!-- 頭部區域（可配合layui已有的水平導航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item nav-suofang">
<i class="layui-icon zoom-suofang layui-icon-shrink-right" style="font-size: 30px; color: #ffffff;"></i>
<i class="layui-icon size-da-xiao" style="font-size: 30px; color: #ffffff;"></i>
</li>
<li class="layui-nav-item"><a id="size_"></a></li>
<li class="layui-nav-item"><a href=""><i class="layui-icon" style="font-size: 20px; color: #1E9FFF;"></i> 控制臺</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></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>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
賢心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本資料</a></dd>
<dd><a href="">安全設置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black" >
<div class="layui-side-scroll" id="admin-scroll">
<!-- 左側導航區域（可配合layui已有的垂直導航） -->
</div>
</div>
<div class="layui-footer" style="border-left:2px solid #b102b9" >
<!-- 底部固定區域 -->
? layui.com - 底部固定區域
</div>
<div class="layui-body" style="border-left:2px solid #b102b9;border-top:2px solid #028a3f;">
<div class="layui-tab layui-tab-brief" lay-filter="demo" style="margin:0px;">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="111" >網站設置 </li>
<!--<li lay-id="222">用戶管理 <i class="layui-icon layui-unselect layui-tab-close">?</i></li>
<li lay-id="333">權限分配</li>
<li lay-id="444">商品管理</li>
<li lay-id="555">訂單管理</li>-->
</ul>
<div class="layui-tab-content" style="padding:2px 0px 0px 5px;height:100%">
<div class="layui-tab-item layui-show">
主頁
<!--<div class="site-demo-button">
<button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab項</button>
<button class="layui-btn site-demo-active" data-type="tabDelete">刪除：商品管理</button>
<button class="layui-btn site-demo-active" data-type="tabChange">切換到：用戶管理</button>
</div>-->
</div>
<!--<div class="layui-tab-item">內容2</div>
<div class="layui-tab-item">內容3</div>
<div class="layui-tab-item">內容4</div>
<div class="layui-tab-item">內容5</div>-->
</div>
</div>
</div>
</div>
<!-- 註意：如果你直接復制所有代碼到本地，上述js路徑需要改成你本地的 -->
<script>
layui.use([‘element‘,‘layer‘] ,function () {
var $ = layui.jquery
, layer = layui.layer
, element = layui.element; //Tab的切換功能，切換事件監聽等，需要依賴element模塊
////觸發事件
//var active = {
// tabAdd: function () {
// //新增一個Tab項
// element.tabAdd(‘demo‘, {
// title: ‘新選項<i class="layui-icon layui-unselect layui-tab-close">?</i>‘ //用於演示
// , content: ‘<iframe src="http://www.baidu.com" style="width:100%;height:‘ + ($content.height() - 50) +‘px;" frameborder="0"></iframe>‘
// , id: new Date().getTime() //實際使用一般是規定好的id，這裏以時間戳模擬下
// });
// //增加點擊關閉事件
// var r = $(".layui-tab-title").find("li");
// //每次新打開tab都是最後一個，所以只對最後一個tab添加點擊關閉事件
// r.eq(r.length - 1).children("i").on("click", function () {
// //alert($(this).parent("li").attr(‘lay-id‘));
// element.tabDelete("demo", $(this).parent("li").attr(‘lay-id‘));
// }), element.tabChange("demo", r.length - 1);
// element.init();
// }
// , tabDelete: function (othis) {
// //刪除指定Tab項
// element.tabDelete(‘demo‘, ‘44‘); //刪除：“商品管理”
// othis.addClass(‘layui-btn-disabled‘);
// }
// , tabChange: function () {
// //切換到指定Tab項
// element.tabChange(‘demo‘, ‘22‘); //切換到：用戶管理
// }
//};
//$(‘.site-demo-active‘).on(‘click‘, function () {
// var othis = $(this), type = othis.data(‘type‘);
// active[type] ? active[type].call(this, othis) : ‘‘;
//});
////Hash地址的定位
//var layid = location.hash.replace(/^#demo=/, ‘‘);
//element.tabChange(‘demo‘, layid);
//console.log(element.tabChange(‘demo‘, layid));
//element.on(‘tab(demo)‘, function (elem) {
// location.hash = ‘demo=‘ + $(this).attr(‘lay-id‘);
//});
//顯示與隱藏左側導航
$(‘.zoom-suofang‘).on(‘click‘, function () {
var sideWidth = $(‘.layui-bg-black‘).width();
if (sideWidth === 200) {
$(‘.layui-body‘).animate({
left: ‘0px‘
});
$(‘.layui-footer‘).animate({
left: ‘0px‘
});
$(‘.layui-bg-black‘).animate({
width: ‘0px‘
});
$(‘.zoom-suofang‘)[0].className = ‘layui-icon zoom-suofang layui-icon-spread-left‘;
} else {
$(‘.layui-body‘).animate({
left: ‘200px‘
});
$(‘.layui-footer‘).animate({
left: ‘200px‘
});
$(‘.layui-bg-black‘).animate({
width: ‘200px‘
});
$(‘.zoom-suofang‘)[0].className = ‘layui-icon zoom-suofang layui-icon-shrink-right‘;
}
});
//模擬F11全屏
var bool = true;
$(‘.size-da-xiao‘).on(‘click‘, function () {
if (bool) {
var docElm = document.documentElement;
var msg = ‘按F11或Esc即可退出全屏‘;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (docElm.msRequestFullscreen) {//ie兼容性不太好所以先不使用
//docElm.msRequestFullscreen();
msg = ‘ie兼容性不太好所以先不使用‘;
}
layer.msg(msg);
bool = false;
} else {
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //Chrome等
document.webkitExitFullscreen || //FireFox
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
}
else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
bool = true;
}
});
//自定義左側導航數據
var navtab =
[
{
title: ‘一級標題1‘,
icon: ‘‘,
open: true,
son:
[
{ id:11, title: ‘百度‘, icon: ‘‘, href: ‘http://www.baidu.com‘ },
{ id:12, title: ‘好123‘, icon: ‘‘, href: ‘http://www.hao123.com‘ },
]
},
{
title: ‘一級標題2‘,
icon: ‘‘,
open: false,
son:
[
{ id:21, title: ‘博客園‘, icon: ‘‘, href:‘https://www.cnblogs.com/‘},
{ id:22, title: ‘CSDN‘, icon: ‘‘, href: ‘https://www.csdn.net/‘}
]
}
];
//左側導航生成方法
var getHtml = function (obj) {
var htm = ‘<ul class="layui-nav layui-nav-tree" lay-filter="test">‘;
for (var i = 0; i < obj.length; i++) {
if (obj[i].son.length > 0) {//二級不為空
htm += obj[i].open ? ‘<li class="layui-nav-item layui-nav-itemed">‘ : ‘<li class="layui-nav-item">‘;
htm += ‘<a href="javascript:;">‘ + obj[i].title + ‘</a><dl class="layui-nav-child">‘;
for (var j = 0; j < obj[i].son.length; j++) {
htm += ‘<dd class="nav-click" data-id="‘ + obj[i].son[j].id + ‘" data-title="‘ + obj[i].son[j].title + ‘" data-href="‘ + obj[i].son[j].href + ‘" data-icon="‘ + obj[i].son[j].icon + ‘" data-type="tabAdd" ><a href="javascript:;"><i class="layui-icon" style="font-size: 20px; color: #ffffff;">‘ + obj[i].son[j].icon + ‘</i> ‘ + obj[i].son[j].title + ‘</a></dd>‘;
}
htm += ‘</dl></li>‘;
}
}
htm += ‘</ul>‘;
return htm;
}
$(‘#admin-scroll‘).html(getHtml(navtab));
element.init();//更新渲染
var $content = $(‘.layui-body‘);//用來獲取高度
//iframe自適應
$(window).on(‘resize‘, function () {
$content.find(‘iframe‘).each(function () {
$(this).height($content.height() - 50);
});
}).resize();
//只展開一個二級菜單
$(‘.layui-bg-black‘).find(‘li.layui-nav-item‘).each(function () {
$(this).on(‘click‘, function () {
$(this).siblings().removeClass(‘layui-nav-itemed‘);
});
});
//觸發事件
var active = {
tabAdd: function (othis) {
//新增一個Tab項
element.tabAdd(‘demo‘, {
title: ‘<i class="layui-icon">‘ + othis.data(‘icon‘) + ‘</i>‘ + othis.data(‘title‘) + ‘<i class="layui-icon layui-unselect layui-tab-close">?</i>‘
, content: ‘<iframe src="‘ + othis.data(‘href‘) +‘" style="width:100%;height:‘ + ($content.height() - 50) + ‘px;" frameborder="0"></iframe>‘
, id: othis.data(‘id‘)
});
//增加點擊關閉事件
var r = $(".layui-tab-title").find("li");
//每次新打開tab都是最後一個，所以只對最後一個tab添加點擊關閉事件
r.eq(r.length - 1).children("i").on("click", function () {
element.tabDelete("demo", $(this).parent("li").attr(‘lay-id‘));
}), element.tabChange("demo", othis.data(‘id‘));
othis[0].dataset.type = ‘tabChange‘;//打開過後將data-type修改為 tabChange 下次點擊就是切換了
console.log(othis);
element.init();
}
, tabChange: function (othis) {
//切換到指定Tab項
element.tabChange(‘demo‘, othis.data(‘id‘)); //切換到
}
};
//左側導航點擊監聽
$(‘.nav-click‘).on(‘click‘, function () {
var othis = $(this), type = othis[0].dataset.type;
active[type] ? active[type].call(this, othis) : ‘‘;
});
});
</script>
</body>
</html>
往日只是逛逛博客園看看大神神作，無奈水平有限，大部分註釋沒有，要麽就一點，很難理解。
記性一項不好的我只能將寫有大部分註釋的代碼貼在這裏，以免後面忘了當初怎麽寫的（大部分還是東復制西粘貼）
Layui 寫一個簡單的後臺頁面