layui自定义admin页面简单实现-练手
代码 免积分下载
<!DOCTYPE html>
<html lang="zh-CN">
<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"/>
<link href="lib/layui/css/layui.css" rel="stylesheet"/>
<style>
.layui-layout-admin .layui-side {
transition-property: all;
transition-duration: 500ms;
transition-timing-function: linear;
}
.layui-layout-admin .layui-body {
transition-property: all;
transition-duration: 500ms;
transition-timing-function: linear;
}
.layui-layout-admin .layui-footer {
transition-property: all;
transition-duration: 500ms;
transition-timing-function: linear;
}
.layui-layout-admin .layui-body {
height: calc(100% - 60px);
}
#tab-main {
position: relative;
height: 100%;
}
#tab-page {
margin: 0;
overflow: hidden;
height: 100% !important;
}
#tab-page .layui-tab-content {
height: calc(100% - 42px) !important;
}
#tab-page .layui-tab-content .layui-tab-item {
overflow-y: auto;
height: 100%;
}
</style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">Admin</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left" lay-filter="header-left-nav">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs">
<a href="#" class="layui-icon layui-icon-shrink-right" id="menu-left-shrick"></a>
</li>
<li class="layui-nav-item layui-hide-xs">
<a href="#" class="layui-icon layui-icon-refresh-1" id="menu-left-refresh"></a>
</li>
</ul>
<ul class="layui-nav layui-layout-right" lay-filter="header-right-nav">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
<img alt="" src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img"/>
Admin
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">个人中心</a></dd>
<dd><a href="javascript:;">设置</a></dd>
<dd><a href="javascript:;">退出</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">
<ul class="layui-nav layui-nav-tree" lay-filter="side-left-nav">
<li class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon layui-icon-github"></i><span>group</span></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;"><span>1</span></a></dd>
<dd><a href="javascript:;"><span>2</span></a></dd>
<dd><a href="javascript:;"><span>3</span></a></dd>
<dd><a href="javascript:;"><span>4</span></a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<div id="tab-main layui-panel">
<div class="layui-tab layui-tab-brief" id="tab-page" lay-filter="tab-page" lay-allowclose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="11">标签1</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>充数内容<br/>你还真滑到了底部呀
</div>
</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script src="lib/layui/layui.js"></script>
<script>
//JS
layui.use(["element", "layer", "util"], function () {
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
//头部事件
util.event("lay-header-event", {
menuLeft: function (othis) {
// 左侧菜单事件
layer.msg("展开左侧菜单的操作", {icon: 0});
},
menuRight: function () {
// 右侧菜单事件
layer.open({
type: 1,
title: "更多",
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
area: ["260px", "100%"],
offset: "rt", // 右上角
anim: "slideLeft", // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false,
});
},
});
$('#menu-left-shrick').click(function () {
const $menuLeftAside = $('.layui-side');
if ($menuLeftAside.width() >= 200) {
$menuLeftAside.css('width', '60px');
setTimeout(function () {
$('.layui-side .layui-nav .layui-nav-item span').addClass('layui-anim').removeClass('layui-anim-fadein').addClass('layui-anim-fadeout');
}, 200);
$('.layui-body').css('left', '60px');
$('.layui-footer').css('left', '60px');
} else {
$menuLeftAside.css('width', '200px');
setTimeout(function () {
$('.layui-side .layui-nav .layui-nav-item span').addClass('layui-anim').removeClass('layui-anim-fadeout').addClass('layui-anim-fadein');
}, 200);
$('.layui-body').css('left', '200px');
$('.layui-footer').css('left', '200px');
}
});
$('#menu-left-refresh').click(function () {
$('#menu-left-refresh').removeClass('layui-anim').removeClass('layui-anim-rotate');
setTimeout(function () {
$('#menu-left-refresh').addClass('layui-anim').addClass('layui-anim-rotate');
}, 100);
});
$('.layui-tab-title').on('contextmenu', 'li', 1, function (event) {
event.preventDefault();
const layId = $(this).attr('lay-id');
layer.open({
type: 1,
title: '关闭标签',
content: false,
time: 5000,
success: function (layero, index) {
let timeNum = this.time / 1000, setText = function (start) {
layer.title('弹窗<span class="layui-font-red">' + (start ? timeNum : --timeNum) + '</span> 秒后自动关闭', index);
};
setText(!0);
this.timer = setInterval(setText, 1000);
if (timeNum <= 0) clearInterval(this.timer);
},
end: function () {
clearInterval(this.timer);
},
btn: ['关闭当前', '关闭其他', '关闭全部'],
btn1: function (index, layero, that) {
element.tabDelete('tab-page', layId);
layer.close(index);
},
btn2: function (index, layero, that) {
$('.layui-tab-title li').each(function (index, elem) {
let liLayId = $(this).attr('lay-id');
if (liLayId !== layId) {
element.tabDelete('tab-page', liLayId);
}
});
layer.close(index);
},
btn3: function (index, layero, that) {
$('.layui-tab-title li').each(function (index, elem) {
let liLayId = $(this).attr('lay-id');
element.tabDelete('tab-page', liLayId);
});
layer.close(index);
}
});
});
element.on('nav(header-left-nav)', function (elem) {
console.log(elem);
});
element.on('nav(header-right-nav)', function (elem) {
console.log(elem);
});
element.on('nav(side-left-nav)', function (elem) {
console.log(elem);
});
// 自定义固定条
util.fixbar({
bars: [
{ // 定义可显示的 bar 列表信息 -- v2.8.0 新增
type: 'share',
icon: 'layui-icon-share'
},
{
type: 'help',
icon: 'layui-icon-help'
},
{
type: 'cart',
icon: 'layui-icon-cart',
style: 'background-color: #FF5722;'
},
{
type: 'groups',
content: '群',
style: 'font-size: 21px;'
}
],
// bar1: true,
// bar2: true,
// default: false, // 是否显示默认的 bar 列表 -- v2.8.0 新增
// bgcolor: '#393D52', // bar 的默认背景色
// css: {right: 100, bottom: 100},
// target: '#target-test', // 插入 fixbar 节点的目标元素选择器
// duration: 300, // top bar 等动画时长（毫秒）
on: { // 任意事件 -- v2.8.0 新增
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true
});
},
mouseleave: function (type) {
layer.closeAll('tips');
}
},
// 点击事件
click: function (type) {
console.log(this, type);
// layer.msg(type);
}
});
});
</script>
</body>
</html>
原文地址：https://blog.csdn.net/by2233/article/details/139186689
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！