前言
之前学习了Bootstrap和Vue.js，现在工作里用到了Layui故学习一下。
Layui的特点就是由职业前端倾情打造，面向全层次的前后端开发者，低门槛开箱即用的前端 UI 解决方案。
Layui属于轻量级框架，简单美观。对后端开发人员友好。
├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
使用
layui可以根据模块进行导入也可以一次性导入全部功能模块。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css"> <script src="/static/layui/layui-v2.5.7/layui/layui.js"></script> </head> <body> <h1>您好</h1> </body> <script> layui.use(["layer", "form", "element"], function () { var layer = layui.layer, form = layui.form, element = layui.element; layer.msg("您好，世界！") }) </script> </html>
布局
Layui跟BootStrap一样有布局容易以及栅格(grid)系统，方便我们对页面整体进行大小划分和布局。
Layui布局容器
我们可以把整个页面视为1个容器，设置容器位固定宽度或者完整宽度。
1.固定宽度：class="layui-container" 两侧有留白效果
2.完整宽度：class="layui-fluid"占据屏幕100%的宽度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <!--引入 核心css文件--> <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css"> </head> <body> <!-- 1.固定宽度：两侧有留白效果 --> <div class="layui-container" style="background-color: navy;height: 200px "> </div> <!--2.完整宽度：占据屏幕100%的宽度 --> <div class="layui-fluid" style="background-color: cyan;height: 500px"></div> </body> </html>
<html class="x-admin-sm"> <head> <meta charset="UTF-8"> <title>运维管理系统</title> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"> <meta http-equiv="Cache-Control" content="no-siteapp"> <link rel="stylesheet" href="/static/X-admin/css/font.css"> <link rel="stylesheet" href="/static/X-admin/css/xadmin.css"> <script src="https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> <script src="/static/X-admin/lib/layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="/static/X-admin/js/xadmin.js"></script> <script type="text/javascript" src="/static/X-admin/js/cookie.js"></script> <script> // 是否开启刷新记忆tab功能 // var is_remember = false; </script> <link id="layuicss-layer" rel="stylesheet" href="http://x.xuebingsi.com/x-admin/v2.1/lib/layui/css/modules/layer/default/layer.css?v=3.1.1" media="all"> </head> <body> <!-- 顶部开始 --> <div class="container"> <div class="logo"><a href="/static/X-admin/index.html">X-admin v2.1</a></div> <div class="left_open"> <i title="展开左侧栏" class="iconfont">�</i> </div> <ul class="layui-nav left fast-add" lay-filter=""> <li class="layui-nav-item"> <a href="javascript:;">+新增<span class="layui-nav-more"></span></a> <dl class="layui-nav-child"> <!-- 二级菜单 --> <dd><a onclick="x_admin_show('资讯','https://www.baidu.com')"><i class="iconfont">�</i>资讯</a></dd> <dd><a onclick="x_admin_show('图片','https://www.baidu.com')"><i class="iconfont">�</i>图片</a></dd> <dd><a onclick="x_admin_show('用户 最大化','https://www.baidu.com','','',true)"><i class="iconfont">�</i>用户最大化</a> </dd> <dd><a onclick="x_admin_add_to_tab('在tab打开','https://www.baidu.com',true)"><i class="iconfont">�</i>在tab打开</a> </dd> </dl> </li> <span class="layui-nav-bar"></span></ul> <ul class="layui-nav right" lay-filter=""> <li class="layui-nav-item"> <a href="javascript:;">admin<span class="layui-nav-more"></span></a> <dl class="layui-nav-child"> <!-- 二级菜单 --> <dd><a onclick="x_admin_show('个人信息','http://www.baidu.com')">个人信息</a></dd> <dd><a onclick="x_admin_show('切换帐号','http://www.baidu.com')">切换帐号</a></dd> <dd><a href="/static/X-admin/login.html">退出</a></dd> </dl> </li> <li class="layui-nav-item to-index"><a href="/">前台首页</a></li> <span class="layui-nav-bar"></span></ul> </div> <!-- 顶部结束 --> <!-- 中部开始 --> <!-- 左侧菜单开始 --> <div class="left-nav"> <div id="side-nav"> <ul id="nav"> <li> <a href="javascript:;"> <i class="iconfont">�</i> <cite>会员管理</cite> <i class="iconfont nav_right">�</i> </a> <ul class="sub-menu"> <li date-refresh="1"> <a _href="member-list.html"> <i class="iconfont">�</i> <cite>会员列表(静态表格)</cite> </a> </li> <li> <a _href="member-list1.html"> <i class="iconfont">�</i> <cite>会员列表(动态表格)</cite> </a> </li> <li date-refresh="1"> <a _href="member-del.html"> <i class="iconfont">�</i> <cite>会员删除</cite> </a> </li> <li> <a href="javascript:;"> <i class="iconfont">�</i> <cite>会员管理</cite> <i class="iconfont nav_right">�</i> </a> <ul class="sub-menu"> <li> <a _href="xxx.html"> <i class="iconfont">�</i> <cite>会员列表</cite> </a> </li> <li> <a _href="xx.html"> <i class="iconfont">�</i> <cite>会员删除</cite> </a> </li> <li> <a _href="xx.html"> <i class="iconfont">�</i> <cite>等级管理</cite> </a> </li> </ul> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont">�</i> <cite>订单管理</cite> <i class="iconfont nav_right">�</i> </a> <ul class="sub-menu"> <li> <a _href="order-list.html"> <i class="iconfont">�</i> <cite>订单列表</cite> </a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont">�</i> <cite>分类管理</cite> <i class="iconfont nav_right">�</i> </a> <ul class="sub-menu"> <li> <a _href="cate.html"> <i class="iconfont">�</i> <cite>多级分类</cite> </a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont">�</i> <cite>城市联动</cite> <i class="iconfont nav_right">�</i> </a> <ul class="sub-menu"> <li> <a _href="city.html"> <i class="iconfont">�</i> <cite>三级地区联动</cite> </a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont">�</i> <cite>管理员管理</cite> <i class="iconfont nav_right">�</i> </a> <ul class="sub-menu"> <li> <a _href="admin-list.html"> <i class="iconfont">�</i> <cite>管理员列表</cite> </a> </li> <li> <a _href="admin-role.html"> <i class="iconfont">�</i> <cite>角色管理</cite> </a> </li> <li> <a _href="admin-cate.html"> <i class="iconfont">�</i> <cite>权限分类</cite> </a> </li> <li> <a _href="admin-rule.html"> <i class="iconfont">�</i> <cite>权限管理</cite> </a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont">�</i> <cite>系统统计</cite> <i class="iconfont nav_right">�</i> </a> <ul class="sub-menu"> <li> <a _href="echarts1.html"> <i class="iconfont">�</i> <cite>拆线图</cite> </a> </li> <li> <a _href="echarts2.html"> <i class="iconfont">�</i> <cite>柱状图</cite> </a> </li> <li> <a _href="echarts3.html"> <i class="iconfont">�</i> <cite>地图</cite> </a> </li> <li> <a _href="echarts4.html"> <i class="iconfont">�</i> <cite>饼图</cite> </a> </li> <li> <a _href="echarts5.html"> <i class="iconfont">�</i> <cite>雷达图</cite> </a> </li> <li> <a _href="echarts6.html"> <i class="iconfont">�</i> <cite>k线图</cite> </a> </li> <li> <a _href="echarts7.html"> <i class="iconfont">�</i> <cite>热力图</cite> </a> </li> <li> <a _href="echarts8.html"> <i class="iconfont">�</i> <cite>仪表图</cite> </a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont">�</i> <cite>图标字体</cite> <i class="iconfont nav_right">�</i> </a> <ul class="sub-menu"> <li> <a _href="unicode.html"> <i class="iconfont">�</i> <cite>图标对应字体</cite> </a> </li> </ul> </li> <li> <a href="javascript:;"> <i class="iconfont">�</i> <cite>其它页面</cite> <i class="iconfont nav_right">�</i> </a> <ul class="sub-menu"> <li> <a href="login.html" target="_blank"> <i class="iconfont">�</i> <cite>登录页面</cite> </a> </li> <li> <a _href="error.html"> <i class="iconfont">�</i> <cite>错误页面</cite> </a> </li> </ul> </li> </ul> </div> </div> <!-- <div class="x-slide_left"></div> --> <!-- 左侧菜单结束 --> <!-- 右侧主体开始 --> <div class="page-content"> <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false"> <ul class="layui-tab-title"> <li class="home"><i class="layui-icon">�</i>我的桌面<i class="layui-icon layui-unselect layui-tab-close">ဆ</i> </li> </ul> <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right"> <dl> <dd data-type="this">关闭当前</dd> <dd data-type="other">关闭其它</dd> <dd data-type="all">关闭全部</dd> </dl> </div> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <iframe src="./welcome.html" frameborder="0" scrolling="yes" class="x-iframe"></iframe> </div> </div> <div id="tab_show"></div> </div> </div> <div class="page-content-bg"></div> <!-- 右侧主体结束 --> <!-- 中部结束 --> <!-- 底部开始 --> <div class="footer"> <div class="copyright">Copyright ©2017 x-admin v2.3 All Rights Reserved</div> </div> <!-- 底部结束 --> <script> //百度统计可去掉 var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>
Layui栅格系统
定义1行：layui-row
定义行中的列： layui-col-md9
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <!--引入 核心css文件--> <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css"> </head> <body> <!-- 1.固定宽度：两侧有留白效果 --> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md7" style="background-color: #00F7DE">内容的12/7</div> <div class="layui-col-md5" style="background-color: #00FF00">内容的12/5</div> </div> <div class="layui-row"> <div class="layui-col-md9" style="background-color: #0000FF"> 你的内容 12/9 </div> <div class="layui-col-md3" style="background-color: red"> 你的内容 12/3 </div> </div> </div> </body> </html>
Layui响应式布局
响应式布局就是根据用户使用设备的分辨率大小，自动调整页面大小。
栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理
列间距
我们可以通过 layui-col-space10类来设定列与列之间的间距。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <!--引入 核心css文件--> <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css"> </head> <body> <!-- 1.固定宽度：两侧有留白效果 --> <div class="layui-container"> <!--设置列与列之间的间距为10px--> <div class="layui-row layui-col-space10"> <div class="layui-col-md4"> <div style="background-color: #0000FF">1/3</div> </div> <div class="layui-col-md4"> <div style="background-color: #0000FF">1/3</div> </div> <div class="layui-col-md4"> <div style="background-color: #0000FF">1/3</div> </div> </div> </div> </body> </html>
列偏移
layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <!--引入 核心css文件--> <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css"> </head> <body> <!-- 1.固定宽度：两侧有留白效果 --> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md4"> 4/12 </div> <!--本列占4个栅格，设置本列向右偏移4个栅格--> <div class="layui-col-md4 layui-col-md-offset4"> 偏移4列，从而在最右 </div> </div> </div> </body> </html>
栅格嵌套
我们可以把1个行划分为12列，也可以把1列作为一行继续划分了12列， 实现无限嵌套列。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <!--引入 核心css文件--> <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css"> </head> <body> <!-- 1.固定宽度：两侧有留白效果 --> <div class="layui-container"> <div class="layui-row layui-col-space5"> <div class="layui-col-md5"> <div class="layui-row grid-demo"> <div class="layui-col-md3"> 内部列 </div> <div class="layui-col-md9"> 内部列 </div> <div class="layui-col-md12"> 内部列 </div> </div> </div> <div class="layui-col-md7"> <div class="layui-row grid-demo grid-demo-bg1"> <div class="layui-col-md12"> 内部列 </div> <div class="layui-col-md9"> 内部列 </div> <div class="layui-col-md3"> 内部列 </div> </div> </div> </div> </div> </body> </html>
按钮
给任意一种HTML元素设置class="layui-btn"即可建立一个基础按钮。
<!--我们可以向任意元素设置layui-btn --> <p class="layui-btn">1111</p> <div class="layui-btn">222</div> <ul class="layui-btn">333</ul>
通过追加类layui-btn-{type}的class来定义按钮的风格。
<button type="button" class="layui-btn">标志按钮</button> <a href="https://www.baidu.com/" class="layui-btn">可以跳转的按钮</a>
调整按钮大小
| 尺寸 | 组合 |
|---|---|
| 大型 | class="layui-btn layui-btn-lg" |
| 默认 | class="layui-btn" |
| 小型 | class="layui-btn layui-btn-sm" |
| 迷你 | class="layui-btn layui-btn-xs" |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <!--引入 核心css文件--> <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css"> </head> <body> <div class="layui-container"> <button type="button" class="layui-btn layui-btn-lg">大型按钮</button> <button type="button" class="layui-btn layui-btn-sm">小型按钮</button> <button type="button" class="layui-btn layui-btn-xs">迷你型按钮</button> </div> </body> </html>
调整钮样式
| 名称 | 组合 |
|---|---|
| 原始 | class="layui-btn layui-btn-primary" |
| 默认 | class="layui-btn" |
| 百搭 | class="layui-btn layui-btn-normal" |
| 暖色 | class="layui-btn layui-btn-warm" |
| 警告 | class="layui-btn layui-btn-danger" |
| 禁用 | class="layui-btn layui-btn-disabled" |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <!--引入 核心css文件--> <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css"> </head> <body> <div class="layui-container"> <button type="button" class="layui-btn">默认按钮</button> <button type="button" class="layui-btn layui-btn-primary">原始样式</button> <button type="button" class="layui-btn layui-btn-normal">百搭样式</button> <button type="button" class="layui-btn layui-btn-warm">暖色</button> <button type="button" class="layui-btn layui-btn-danger">警告</button> <button type="button" class="layui-btn layui-btn-disabled">禁用</button> </div> </body> </html>
导航菜单（面包屑）
在设计前端页面时，用户通过登录页面进行账号注册和登录之后，展示该站点的菜单（功能）是首要考虑问题。
菜单样式
layui-nav:代表这是个导航菜单
layui-nav-item:代表菜单的子项
layui-this:默认选中的菜单项
设置菜单方向
我们可以选择不同菜单方向。
1.水平导航
<ul class="layui-nav">默认水平导航菜单的方向，可以通过style="float: right"把某个菜单移动到最右/左侧。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui导航</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 rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css"> </head> <body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>水平导航菜单</legend> </fieldset> <ul class="layui-nav"> <!--导航嵌套效果 --> <li class="layui-nav-item layui-this"> <a href="javascript:;">产品</a> <dl class="layui-nav-child"> <dd><a href="">选项1</a></dd> <dd><a href="">选项2</a></dd> <dd><a href="">选项3</a></dd> </dl> </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 class="layui-this"><a href="">选中项</a></dd> <dd><a href="">电商平台</a></dd> </dl> </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="">社区</a></li> </ul> <script src="/static/layui/layui-v2.5.7/layui/layui.js" charset="utf-8"></script> <script> layui.use('element', function () { }); </script> </body> </html>
2.垂直导航
给ul标签增加layui-nav-tree可以让菜单变成垂直方向。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui导航</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 rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css"> </head> <body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>垂直导航菜单</legend> </fieldset> <!--增加layui-nav-tree可以让菜单变成垂直样式 --> <ul class="layui-nav layui-nav-tree "> <!--包含二级菜单 --> <li class="layui-nav-item layui-this"> <a href="javascript:;">产品</a> <dl class="layui-nav-child"> <dd><a href="">选项1</a></dd> <dd><a href="">选项2</a></dd> <dd><a href="">选项3</a></dd> </dl> </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 class="layui-this"><a href="">选中项</a></dd> <dd><a href="">电商平台</a></dd> </dl> </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="">社区</a></li> </ul> <script src="/static/layui/layui-v2.5.7/layui/layui.js" charset="utf-8"></script> <script> layui.use('element', function () { }); </script> </body> </html>
选项卡
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui导航</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 rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css"> </head> <body> <div class="layui-tab"> <!--选项卡的标题 --> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <!--选项卡的内容：顺序和选项卡的标题保持一致 --> <div class="layui-tab-content"> <div class="layui-tab-item">内容1</div> <div class="layui-tab-item layui-show"> 1. 高度默认自适应，也可以随意固宽。 <br>2. Tab进行了响应式处理，所以无需担心数量多少。 </div> <div class="layui-tab-item">内容3</div> <div class="layui-tab-item">内容4</div> <div class="layui-tab-item">内容5</div> </div> </div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>动态操作Tab</legend> </fieldset> <script src="/static/layui/layui-v2.5.7/layui/layui.js" charset="utf-8"></script> <script> //注意引入element模块，选项卡才可点击 layui.use('element', function () { }); </script> </body> </html>
layer
layer可以帮我们打开1个弹出的对话框。
layer.open({ title: "搜索条件", type: 1, area: ['300px', '300px'], content: $('#searchSet') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 }); $("#confirmCondition").click(issueAction.tableFilter);
并列搜索的UI
checkCondition: function (item) { var boolArry = []; var parameterCounter = 0; $("#searchArea input").each(function (index, element) { if ($(element).val().trim().length >= 1) { parameterCounter += 1; if (item[$(element).attr("name")] == $(element).val().trim()) boolArry.push(true) } }); if (boolArry.length == parameterCounter && parameterCounter >= 1) { return true } },