基础功能：
1-伸缩左侧菜单和动画
2-tab-窗口iframe和切换tab窗侧栏菜单高亮
3-刷新和全屏
<!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">
<dd><a href="javascript:;" menu-title="会员" menuid="5" lay-href="/admin/user">会员</a></dd>
<dd><a href="javascript:;" menu-title="管理员" menuid="6" lay-href="/admin/admins">管理员</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\')) {//注意html元素有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 && layid !=0) {
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>本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。