layUI简单初始化后台模板
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>管理系统</title>
<link rel="stylesheet" href="/static/js/layui/css/layui.css">
</head>
<style>
/*消除导航nav*下来的出现的水平滚动条*/
body {
overflow-x: hidden;
}
/*改原来head 样式*/
.layui-header .layui-nav-bar {
top: 0 !important;
height: 2px !important;
}
.layui-tab-title {
padding-left: 41px;
padding-right: 80px;
}
/*改原本nav样式，可以不用影响*/
.layui-side .layui-nav > .layui-nav-item span.layui-icon {
margin-right: 10px;
}
.layui-side .layui-nav > .layui-nav-item > a {
text-overflow: clip !important;
}
.layui-side .layui-nav > .layui-nav-item > dl> dd > a {
padding-left: 30px !important;
}
.layui-side .layui-nav .layui-nav-item [level='3'] > dd> a {
padding-left: 45px !important;
}
/*改原本nav样式，end*/
/*收缩左侧栏样式 重点*/
.layui-side:hover {overflow-x: visible!important;}
.layui-side-hover cite {
display: none;
}
.layui-side-hover .layui-nav-item > a .layui-nav-more {display: none;}
.layui-side-hover .layui-side-scroll {
overflow-x: visible !important;
width: 60px !important;
}
.layui-side-hover [lay-filter="side-menu"]{width: 60px !important;}
.layui-side-hover .layui-nav > .layui-nav-item > .layui-nav-child{
z-index: 99;
overflow: hidden;
background-color: #23262E!important;
display: none;
position: absolute!important;
min-width: 140px;
margin-left: 60px;
padding: 4px 0!important;
border-radius: 2px;
box-shadow: 0px 0px 2px whitesmoke!important;
}
.layui-side-hover .layui-nav > .layui-nav-item:hover > .layui-nav-child { display: block; }
/*收缩左侧栏样式 end*/
/*tab title 栏*/
.layui-tab-control > li {
position: absolute;
top: 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #fff;
border-top: whitesmoke 1px solid;
border-bottom: whitesmoke 1px solid;
}
.layui-tab-control .layui-tab-prev {
left: 0;
border-right: whitesmoke 1px solid;
}
.layui-tab-control .layui-tab-next {
right: 40px;
border-left: 1px solid whitesmoke;
}
.layui-tab-control .layui-tab-tool {
right: 0;
border-left: 1px solid whitesmoke;
}
/*tab栏更多操作*/
.layui-tab-tool .layui-nav {
position: absolute;
top: 0;
width: 100%;
height: 43px !important;
padding: 0;
background: 0 0;
}
.layui-tab-tool .layui-nav-item {
height: 40px;
}
.layui-tab-tool .layui-nav-child {
left: auto;
top: 45px;
right: 3px;
width: 120px;
border: 1px solid whitesmoke;
}
/*重点 iframe*/
.lay-iframe[lay-frameId] {
width: 100%;
height: 99%;
border: 0;
}
.layui-tab-title .layui-icon-home {
min-width: 30px;
font-size: 20px;
}
</style>
<!-- dom基本和文档示例看齐 -->
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">YANG ADMIN</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-hide-xs" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-shrink-right"></i>
</li>
<li class="layui-nav-item refresh layui-hide-xs " lay-unselect><a href="javascript:;">刷新</a></li>
<li class="layui-nav-item layui-hide-xs" lay-unselect><a href="">前台</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide-xs" lay-unselect><a href="javascript:;" data-toggle='fullscreen'>全屏</a></li>
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
class="layui-nav-img">
杨十一
</a>
<dl class="layui-nav-child">
<dd><a href="">个人中心</a></dd>
<dd><a href="">修改密码</a></dd>
<dd><a href="">注销登录</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="side-menu">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" menu-title="用户管理" menuid="1"><span class="layui-icon layui-icon-home"></span><cite>用户管理</cite></a>
<dl class="layui-nav-child layui-nav-hover">
<dd><a href="javascript:;" menu-title="会员" menuid="5" lay-href="/admin/console">会员</a></dd>
<dd><a href="javascript:;" menu-title="管理员" menuid="6" lay-href="/admin/console">管理员</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><cite>系统</cite></a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;">权限</a>
<dl class="layui-nav-child" level="3">
<dd><a href="javascript:;">list 1</a></dd>
<dd><a href="javascript:;">list 2</a></dd>
</dl>
</dd>
<dd><a href="javascript:;">list 2</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href=""><cite>the links</cite></a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div class="layui-tab layui-tab-brief" style="margin-top: 2px" lay-allowClose="true" lay-filter="content">
<ul class="layui-tab-title">
<li class="layui-icon layui-icon-home layui-this" lay-id="0">
<i class="layui-icon layui-hide layui-disabled layui-tab-close"></i>
</li>
</ul>
<div class="layui-tab-control">
<li class="layui-tab-prev layui-icon layui-icon-left"></li>
<li class="layui-tab-next layui-icon layui-icon-right"></li>
<li class="layui-tab-tool layui-icon layui-icon-down">
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon layui-icon-down layui-nav-more"></i></a>
<dl class="layui-nav-child">
<dd id="closeThis"><a href="javascript:;">关 闭 当 前</a></dd>
<dd id="closeOther"><a href="javascript:;">关 闭 其 他</a></dd>
<dd id="closeAll"><a href="javascript:;">关 闭 全 部</a></dd>
</dl>
</li>
</ul>
</li>
</div>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<iframe class="lay-iframe" lay-frameid="0" src="/admin/console" lay-iframe="true"></iframe>
</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script src="/static/js/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function () {
let element = layui.element
, layer = layui.layer
, util = layui.util
, $ = layui.$;
const winIndex = layer.load(2, {shade: 0, time: 10 * 1000});
let thisIndexId = 0
$(function () {
$('.refresh').on('click',function (){
const iframe = $("[lay-frameId="+thisIndexId+"]")
//console.log(iframe);
iframe.attr('src', iframe.attr('src'));
const index = layer.load(2, {shade: 0, time: 10 * 1000});
iframe.load(function () {
layer.close(index);
})
})
$(window).load(function () {
layer.close(winIndex)
})
})
//左侧栏菜单添加tab窗口
let index;//tab窗口
element.on('nav(side-menu)', function (elem) {
const title = elem.attr('menu-title');
const url = elem.attr('lay-href');
let layId = elem.attr('menuid');
const tabElem = $("[lay-filter='content']").find("[lay-id=" + layId + "]")
if (tabElem.length < 1) {
if (elem.attr('lay-href')) {
element.tabAdd('content', {//layui 内置添加tab事件
title: title,
content: '<iframe class="lay-iframe" lay-frameId="' + layId + '" src="' + url + '"></iframe>',
id: layId
});
}
}
let iframe = $("[lay-frameId=" + layId + " ]");
//console.log(iframe)
if (iframe.length > 0) {
const is = iframe.attr('lay-iframe')
if (!is) {
index = layer.load(2, {shade: 0, time: 8 * 1000});
iframe.load(function () {
iframe.attr("lay-iframe", true)
layer.close(index);
});
}
}
//切换Tab layui内置
element.tabChange('content', layId)
//console.log(tabElem); //得到当前点击的DOM对象
});
//tab删除监听
element.on('tabDelete(content)', function (data) {
//console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
layer.close(index);
const menuId = data.elem.find('[lay-id]').eq(data.index-1).attr('lay-id');
const menu = $("[lay-filter='side-menu']");
menu.find("[lay-href]").parent().removeClass('layui-this')
menu.find('[menuid=' + menuId + ']').parent().addClass('layui-this');
});
//tab切换状态监听,事件目的切换tab左侧栏菜单高亮定位
element.on('tab(content)', function (data) {
console.log(data.index); //得到当前Tab的所在下标
const menuId = data.elem.find('[lay-id]').eq(data.index).attr('lay-id');
const menu = $("[lay-filter='side-menu']");
menu.find("[lay-href]").parent().removeClass('layui-this')
menu.find('[menuid=' + menuId + ']').parent().addClass('layui-this');
});
$("#closeThis").on('click', function () {
close.coleThis();
});
$("#closeOther").on('click', function () {
close.coleOther();
});
$("#closeAll").on('click', function () {
close.coleAll();
})
//tab栏的右边nav对tab的三种操作事件
let close = {
coleAll: function () {
$("[lay-filter='content']").find('.layui-tab-title .layui-tab-close').trigger('click');
},
coleThis: function () {
const layid = $("[lay-filter='content']").find('.layui-tab-title .layui-this').attr('lay-id')
element.tabDelete('content', layid);
},
coleOther: function () {
const el = $("[lay-filter='content']");
const thisId = el.find('.layui-tab-title .layui-this').attr('lay-id');
$.each(el.find('.layui-tab-title li[lay-id]'), function () {
let layid = $(this).attr('lay-id');
if (layid != thisId) {
element.tabDelete('content', layid);
}
});
}
}
$("[data-toggle='fullscreen']").on('click', function () {
let doc = document.documentElement;
$(document.body).addClass("full-screen");
doc.requestFullscreen ? doc.requestFullscreen() : doc.mozRequestFullScreen ? doc.mozRequestFullScreen() : doc.webkitRequestFullscreen ? doc.webkitRequestFullscreen() : doc.msRequestFullscreen && doc.msRequestFullscreen();
});
util.event('lay-header-event', {// util.event 是layui内置方法，疑问看文档
//左侧菜单事件
menuLeft: function (elem) {
//console.log(elem)
let domSideElem = $('.layui-side');
let domBodyElem = $('.layui-body');
if (domSideElem.css('width') === '200px') {
elem.find('i').removeClass('layui-icon-shrink-right')
elem.find('i').addClass('layui-icon-spread-left')
domSideElem.addClass('layui-side-hover');
domSideElem.animate({ 'width': '60px' }, 300);
domBodyElem.animate({ left: '60px' }, 300);
}
else {
domSideElem.removeClass('layui-side-hover');
elem.find('i').removeClass('layui-icon-spread-left');
elem.find('i').addClass('layui-icon-shrink-right');
domSideElem.animate({ 'width': '200px' }, 300);
domBodyElem.animate({ left: '200px' }, 300);
}
//layer.msg('展开左侧菜单的操作', {icon: 0});
}
, menuRight: function () {
layer.open({
type: 1
, content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
, area: ['260px', '100%']
, offset: 'rt' //右上角
, anim: 5
, shadeClose: true
});
}
});
});
</script>
</body>
</html>
标签：function,初始化,layUI,nav,lay,tab,layui,side,模板 来源： https://www.cnblogs.com/yangshiyi/p/15362183.html