简介：layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
官网下载js文档格式如下：
下面是我搭建的后台管理：粘贴即用，用起来非常方便；特别说明：本文采用的是模块化，用到哪个模块需要加载哪个模块。
<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title></title>
<!--每打开一个页面重新渲染，不缓存-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<link rel="stylesheet" type="text/css" href="/layui2.45/css/layui.css"/>
<script type="text/javascript" src="/layui2.45/layui.js"></script>
<style>
.my_left_tree .magin_left20px {
margin-left: 20px;
}
.my_left_tree .magin_left35px {
margin-left: 35px;
}
.layui-layout-left .layui-nav-item:hover {
background: #009F95;
cursor: pointer;
}
</style>
</head>
<body class="layui-layout-body" style="height: 100%; width: 100%;">
<div class="layui-layout layui-layout-admin my_layout">
<!--
作者：offline
时间：2019-11-08
描述：修改头部的背景色： 修改layui-header的div
-->
<div class="layui-header">
<div class="layui-logo">
xxxxx 管理平台
</div>
<div class="layui-nav layui-layout-left">
<div id="changBig" class="layui-nav-item" style="width: 50px; text-align: center;">
<i class="layui-icon layui-icon-menu-fill" style="font-size: 20px;color: orange;"></i>
</div>
<div onclick="fullScreen()" class="layui-nav-item" style="width: 50px; text-align: center;">
<i class="layui-icon layui-icon-website" style="font-size: 20px;color: orangered;"></i>
</div>
<!--<button onclick="exitScreen()">现代浏览器退出</button>-->
<div class="layui-nav-item" onclick="homeRefresh()" id="myRefresh" style="width: 50px; text-align: center;">
<i class="layui-icon layui-icon-refresh-3" style="font-size: 20px;color: orangered;"></i>
</div>
</div>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<!--<img th:attr="src=${session.user.image}" style="height: 50px; width:50px;" />-->
<img src="/images/1.jpg" style="height: 50px; width:50px;">
</li>
<li class="layui-nav-item">
<a href="javascript:void(0)">
欢迎管理员: <span th:text="${session.user.username}"></span>
</a>
<dl class="layui-nav-child">
<dd id="001" class="layui-this">
<a href="javascript:;" data-id="001" data-title="基本资料"
data-url="/backstage/adminUser/adminUserMessage.html" class="site-demo-active"
data-type="tabAdd">
<span class="">基本资料</span>
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="/admin/adminUser/loginOut">安全退出</a>
</li>
</ul>
</div>
<div class="myBoot">
<div class="my_left_tree layui-side layui-bg-black myTreeLeft">
<div class="layui-side-scroll">
<!-- 左侧垂直导航区域-->
<!--
作者：offline
时间：2019-11-08
描述：修改ul的css背景色样式即可
-->
<ul id="leftNavTree" class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">
<i class="layui-icon layui-icon-home"></i>
<span class="magin_left20px">主页</span>
</a>
<dl class="layui-nav-child">
<dd id="0" class="layui-this">
<a href="javascript:;" data-id="0" data-title="city数据" id="homePage"
data-url="/backstage/city/city.html" class="site-demo-active" data-type="tabAdd">
<span class="magin_left35px">主页</span>
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon layui-icon-auz"></i>
<span class="magin_left20px">权限</span>
</a>
<dl class="layui-nav-child">
<dd id="1">
<a href="javascript:;" data-id="1" data-title="管理权限"
data-url="/backstage/adminUser/adminUserList.html" class="site-demo-active"
data-type="tabAdd">
<span class="magin_left35px">管理权限</span>
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon layui-icon-user"></i>
<span class="magin_left20px">用户</span>
</a>
<dl class="layui-nav-child">
<dd id="111">
<a href="javascript:;" data-id="111" data-title="用户列表"
data-url="/admin/clientUser/userList.html" class="site-demo-active"
data-type="tabAdd">
<span class="magin_left35px">用户列表</span>
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon layui-icon-component"></i>
<span class="magin_left20px">试卷</span>
</a>
<dl class="layui-nav-child">
<dd id="3">
<a href="javascript:;" data-id="3" data-title="试卷列表"
data-url="/backstage/paper/paperList.html" class="site-demo-active"
data-type="tabAdd">
<span class="magin_left35px">试卷列表</span>
</a>
</dd>
<dd id="4">
<a href="javascript:;" data-id="4" data-title="添加试卷"
data-url="/backstage/paper/addOrUpdatePaper.html" class="site-demo-active"
data-type="tabAdd">
<span class="magin_left35px">添加试卷</span>
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon layui-icon-survey"></i>
<span class="magin_left20px">测试</span>
</a>
<dl class="layui-nav-child">
<dd id="5">
<a href="javascript:;" data-id="5" data-url="/backstage/fu.html"
class="site-demo-active" data-title="富文本" data-type="tabAdd">
<span class="magin_left35px">富文本</span>
</a>
</dd>
<dd id="6">
<a href="javascript:;" data-id="6" class="site-demo-active"
data-url="/admin/active/active_preavis.html" data-title="活动预告" data-type="tabAdd">
<span class="magin_left35px">活动预告</span>
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon layui-icon-carousel"></i>
<span class="magin_left20px">轮播</span>
</a>
<dl class="layui-nav-child">
<dd id="8">
<a href="javascript:;" data-id="8" class="site-demo-active"
data-url="/admin/rolling/getAll" data-title="轮播图" data-type="tabAdd">
<span class="magin_left35px">轮播管理</span>
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon layui-icon-rmb"></i>
<span class="magin_left20px">商城</span>
</a>
<dl class="layui-nav-child">
<dd id="9">
<a href="javascript:;" data-id="9" class="site-demo-active"
data-url="/admin/integralMall/productList.html" data-title="积分商品" data-type="tabAdd">
<span class="magin_left35px">积分商品</span>
</a>
</dd>
</dl>
<dl class="layui-nav-child">
<dd id="91">
<a href="javascript:;" data-id="91" class="site-demo-active"
data-url="/admin/luckDrawProduct/luckDrawProduct.html" data-title="抽奖商品"
data-type="tabAdd">
<span class="magin_left35px">抽奖商品</span>
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon layui-icon-notice"></i>
<span class="magin_left20px">留言</span>
</a>
<dl class="layui-nav-child">
<dd id="11">
<a href="javascript:;" data-id="11" class="site-demo-active"
data-url="/admin/message/messageList.html" data-title="留言列表" data-type="tabAdd">
<span class="magin_left35px">用户留言</span>
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon layui-icon-set"></i>
<span class="magin_left20px">设置</span>
</a>
<dl class="layui-nav-child">
<dd id="12">
<a href="javascript:;" data-id="12" data-url="/admin/aboutUs/aboutUs.html"
class="site-demo-active" data-title="关于我们" data-type="tabAdd">
<span class="magin_left35px">关于我们</span>
</a>
</dd>
</dl>
<dl class="layui-nav-child">
<dd id="13">
<a href="javascript:;" data-url="/admin/patientExample/patientExampleList.html"
data-id="13" class="site-demo-active" data-title="病例展示" data-type="tabAdd">
<span class="magin_left35px">病例展示</span>
</a>
</dd>
</dl>
<dl class="layui-nav-child">
<dd id="14">
<a href="javascript:;"
data-url="/admin/systemIntegrationRules/systemIntegrationRules.html" data-id="14"
class="site-demo-active" data-title="既定规则" data-type="tabAdd">
<span class="magin_left35px">既定规则</span>
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon layui-icon-set"></i>
<span class="magin_left20px">一级菜单</span>
</a>
<dl class="layui-nav-child">
<a href="javascript:;">
<i class="layui-icon layui-icon-set"></i>
<span class="magin_left20px">二级菜单</span>
</a>
<dl class="layui-nav-child">
<dd id="15">
<a href="javascript:;"
data-url="/admin/systemIntegrationRules/systemIntegrationRules.html" data-id="15"
class="site-demo-active" data-title="菜单子项" data-type="tabAdd">
<span class="magin_left35px">菜单子项3223242343242334234</span>
</a>
</dd>
</dl>
</dl>
</li>
</ul>
</div>
</div>
<!--tab标签-->
<div class="layui-tab myTableRight" id="layui_tab_content" lay-filter="demo" lay-allowclose="true"
style="margin-left: 200px;">
<ul class="layui-tab-title" style="width: 100%;">
<li class="layui-this" lay-id="0">
<i class="layui-icon layui-icon-home"></i>
</li>
</ul>
<div class="layui-tab-content" style="width: 100%;">
<div class="layui-tab-item layui-show">
<iframe name="ifrmname" class="layadmin-iframe" scrolling="auto" frameborder="0"
src="/backstage/city/city.html"
style="width: 98%; height: 100%; min-height: 764px;overflow: auto;"></iframe>
</div>
</div>
</div>
</div>
</div>
<script>
/**
* 刷新
* */
function homeRefresh(url) {
window.location.href = "http://localhost:8081/backstage/home.html";
};
//全屏
function fullScreen() {
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
}
;
return;
}
//退出全屏
function exitScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
}
}
/**
* layui的使用
*/
layui.use(['element', 'layer', 'jquery'], function () {
var element = layui.element;
var $ = layui.$;
$("#changBig").click(function () {
var ifShowTree = $('.my_left_tree').css('display');
if (ifShowTree == 'none') {
$(".my_left_tree").css("display", "block");
$(".myTableRight").css("margin-left", "200px");
} else {
$(".my_left_tree").css("display", "none");
$(".myTableRight").css("margin-left", "0px");
}
});
/**刷新子页面
* */
$("#myRefresh").click(function () {
var hash = location.hash;
var url = hash.substring(1, hash.length);
$("body .layui-show iframe").attr("src", url);
})
/**
* 点击左边的菜单列表，对应的添加选项卡
*/
// 配置tab实践在下面无法获取到菜单元素
$('.site-demo-active').on('click', function () {
var dataid = $(this);
var url = dataid.attr("data-url");
var id = dataid.attr("data-id");
var title = dataid.attr("data-title");
//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
addTableAndChangTable(url, id, title);
});
/**
* 添加并且跳转到该选项卡
**/
window.addTableAndChangTable = function (url, id, title) {
if ($(".layui-tab-title li[lay-id]").length <= 0) {
//如果比零小，则直接打开新的tab项
active.tabAdd(url, id, title);
} else {
//否则判断该tab项是否以及存在
var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
$.each($(".layui-tab-title li[lay-id]"), function () {
//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
if ($(this).attr("lay-id") == id) {
isData = true;
}
})
if (isData == false) {
//标志为false 新增一个tab项
active.tabAdd(url, id, title);
}
}
//最后不管是否新增tab，最后都转到要打开的选项页面上
active.tabChange(id);
};
/**
* 写的是一个javascript对象，对应选项卡的增改删
*/
var active = {
//在这里给active绑定几项事件，后面可通过active调用这些事件
tabAdd: function (url, id, name) {
//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
element.tabAdd('demo', {
title: name,
content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:98%;height:99%;"></iframe>',
id: id //规定好的id
})
FrameWH(); //计算ifram层的大小
},
tabChange: function (id) {
//切换到指定Tab项
element.tabChange('demo', id); //根据传入的id传入到指定的tab项
},
tabDelete: function (id) {
element.tabDelete("demo", id); //删除
},
};
/**
* 计算iframe高度
*/
function FrameWH() {
var h = $(window).height();
$("iframe").css("height", h + "px");
};
/**
* 监听事件当你点击选项卡，对应左边的树添加类
*/
element.on('tab(demo)', function (data) {
var lay_id = $(this).attr("lay-id");
$(".layui-nav-child").find("dd").removeClass("layui-this");
$("#" + lay_id).addClass("layui-this");
});
});
</script>
</body>
</html>有啥不懂得小伙伴们加群交流啦：852665736；本群致力于一同进步的小伙伴们，大家一起交流探讨，在陌生的城市感受温暖；
无偿免费分享源码以及技术和面试文档，更多优秀精致的源码技术栈分享请关注公众号：gh_817962068649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
