layui前端框架的基本使用方法

镜像站@Layui - 经典开源模块化前端 UI 框架 (gitee.io)https://lh_yun.gitee.io/layui/www.layui.com/index.html 由于layui已经下架，所以在这里我们可以通过镜像站来访问到layui的主页

1.layui的使用

2.布局容器

3.栅格系统

4.表单和按钮

5.选项卡

6.表格

7.面板

8.时间线

9.弹出层

10.数据表格

1.layui的使用

要想在项目中使用layui提供的框架，需要引入layui的css文件和js文件；

下载链接：百度网盘请输入提取码https://pan.baidu.com/s/1OBe3CJsMXRhz6nWWyiDj5g

提取码：ncjq

下载完成后直接复制到项目中即可使用

下面就可以使用layui中的框架了

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>layui的使用</title><link rel="stylesheet" type="text/css" href="layui-v2.2.5/layui/css/layui.css"/><script src="layui-v2.2.5/layui/layui.js" type="text/javascript" charset="UTF-8"></script></head><body><script>layui.use(['layer', 'form'], function(){var layer = layui.layer,form = layui.form;layer.msg('Hello World');});</script></body>
</html>

2.布局容器

在这里一般会有两种效果：

1.固定宽度，两边留有空白效果（常用）

2.完整宽度，两边没有空白效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>布局容器</title><link rel="stylesheet" type="text/css" href="layui-v2.2.5/layui/css/layui.css"/></head><body><div class="layui-container" style="background-color: #00F7DE;height: 300px;">固定宽度，两边留有空白效果</div><div class="layui-fluid" style="background-color:  #009688;height: 300px;">完整宽度，两边没有空白效果</div></body>
</html>

效果如下：

3.栅格系统

1.定义行       .layui-row
       2.定义列       .layui-col-md*
                   md 表示不同屏幕的标识(xs,sm,md,lg)
                   * 表示列的数量

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>栅格系统</title><link rel="stylesheet" type="text/css" href="layui-v2.2.5/layui/css/layui.css"/></head><body><div class="layui-container"><!-- 定义行--><div class="layui-row"><!-- 定义列 --><div class="layui-col-md5" style="background-color: #007DDB;">内容5/12</div><div class="layui-col-md7" style="background-color: #00F7DE;">内容7/12</div></div><div class="layui-row"><!-- 定义列 --><div class="layui-col-md4" style="background-color: #EB7350;">内容4/12</div><div class="layui-col-md4" style="background-color: #FFB800;">内容4/12</div><!-- 超过12会自动换行 --><div class="layui-col-md6" style="background-color: #C2C2C2;">内容6/12</div></div><div class="layui-row"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: pink;">移动：6/12 | 平板：6/12 | 桌面：4/12</div><div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: palegoldenrod;">移动：6/12 | 平板：6/12 | 桌面：4/12</div><div class="layui-col-xs4 layui-col-sm12 layui-col-md4" style="background-color: peru;">移动：4/12 | 平板：12/12 | 桌面：4/12</div><div class="layui-col-xs4 layui-col-sm7 layui-col-md8" style="background-color: powderblue;">移动：4/12 | 平板：7/12 | 桌面：8/12</div><div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="background-color: palegreen;">移动：4/12 | 平板：5/12 | 桌面：4/12</div></div></div></body>
</html>

在网页中的效果如下：

4.表单和按钮

在使用表单和按钮之前需要加载form模块，加载完成后就可以使用layui中的属性了。

<script type="text/javascript">layui.use("form",function(){var form = layui.form;});
</script>

表单：

常用属性：
                   required                    浏览器固定的必填字段
                   lay-verify                    需要验证的类型（required表示必填项）
                   class="layui-input"           提供的通用的样式
                   class="layui-input-block"   占据全部宽度
                   class="layui-input-inline"   占据部分宽度
        文本框：
                   placeholder            当文本框为空时，默认显示的文本信息
                   autocomplete            表单元素是否自动填充(当浏览器中缓存中存在相同name属性的值时，会填充)

下拉框：
                   1.通过selectsd属性设置默认选中项
                   2.通过disabled属性开启禁用，可以设置select和option标签(禁用下拉框和禁用下拉选项)
                   3.可以通过optgroup标签给select分组
                   4.通过lay-search属性开启搜索匹配功能

复选框：
                   1.通过title属性设置自定义文本（如果不需要显示文本，则不设置title属性）
                   2.通过checked属性设置被选中的框
                   3.通过lay-skin属性设置复选框的样式效果（lay-skin="primary"表示原始效果）
                   4.通过disabled属性禁用元素

开关：
                   将一个复选框，设置lay-skin="switch"形成开关分格
                       1.通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过"|"分割
                       2.通过checked设置默认打开状态
                       3.通过disabled属性禁用开关
                       4.通过value属性设置选中的值

单选框：
                   1.通过checked设置默认打开状态
                   2.通过disabled属性禁用开关
                   3.通过value属性设置选中的值

文本域：
class="layui-textarea"来引入文本域

按钮

1.主题
                   原始   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"
2.尺寸
                   大型   class="layui-btn layui-btn-lg"
                   默认   class="layui-btn"
                   小型   class="layui-btn layui-btn-sm"
                   迷你   class="layui-btn layui-btn-xs"
3.圆角
                   原始   class="layui-btn layui-btn-radius layui-btn-primary"
                   默认   class="layui-btn layui-btn-radius"
                   百搭   class="layui-btn layui-btn-radius layui-btn-normal"
                   暖色   class="layui-btn layui-btn-radius layui-btn-warm"
                   警告   class="layui-btn layui-btn-radius layui-btn-danger"
                   禁用   class="layui-btn layui-btn-radius layui-btn-disabled"

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单</title><link rel="stylesheet" type="text/css" href="layui-v2.2.5/layui/css/layui.css"/><script type="text/javascript" src="layui-v2.2.5/layui/layui.js" charset="UTF-8"></script></head><body><form class="layui-form" action=""><!-- 文本框 --><div class="layui-form-item"><label class="layui-form-label">标题</label><div class="layui-input-inline"><!-- <input type="text" name="title" class="layui-input"/> --><input type="text" name="title" required="required" placeholder="请输入标题" autocomplete="off" class="layui-input"/></div></div><div class="layui-form-item"><label class="layui-form-label">城市</label><div class="layui-input-inline"><select name="city" lay-verify="required" ><option value="">请选择一个城市</option><option value="0" selected>北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option><option value="4" disabled>杭州</option></select><!-- 分组 --><select name="quiz"><option value="">请选择</option><optgroup label="城市记忆"><option value="你工作的第一个城市">你工作的第一个城市？</option></optgroup><optgroup label="学生时代"><option value="你的工号">你的工号？</option><option value="你最喜欢的老师">你最喜欢的老师？</option></optgroup></select><!-- 开启匹配搜索 --><select name="city" lay-verify="" lay-search><option value="">请选择</option><option value="1">layer</option><option value="2">form</option><option value="4">layim</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">爱好</label><div class="layui-input-block"><!-- 默认效果 --><input type="checkbox" name="hobby" title="唱歌" checked value="sing"/><input type="checkbox" name="hobby" title="跳舞" value="dance"/><input type="checkbox" name="hobby" title="Rap" disabled value="Rap"/><input type="checkbox" name="hobby" title="篮球" value="basketball"/><br /><!-- 原始效果 --><input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" checked value="sing"/><input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="dance"/><input type="checkbox" name="hobby" title="Rap" lay-skin="primary" value="Rap"/><input type="checkbox" name="hobby" title="篮球" lay-skin="primary" disabled value="basketball"/></div></div><div class="layui-form-item"><label class="layui-form-label">开关</label><div class="layui-input-block"><input type="checkbox" name="switch" lay-skin="switch"/><input type="checkbox" name="switch1" lay-skin="switch" checked/><input type="checkbox" name="switch2" lay-skin="switch" checked lay-text="ON|OFF" value="ON"/><input type="checkbox" name="switch3" lay-skin="switch" checked lay-text="ON|OFF" disabled/></div></div><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-block"><input type="radio" name="sex" value="man" title="男" checked/><input type="radio" name="sex" value="women" title="女" /><input type="radio" name="sex" value="neutral " title="中性" disabled/></div></div><div class="layui-form-item"><label class="layui-form-label">简介</label><div class="layui-input-inline"><textarea name="remark" required lay-verify="required" placeholder="请输入个人简介" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form><!-- 加载模块       --><script type="text/javascript">layui.use("form",function(){var form = layui.form;});</script></body>
</html>

效果如下：

5.选项卡

使用前需要加载element模块

<script>layui.use('element', function(){var element = layui.element;});
</script>

默认风格：layui-tab
               简洁风格：layui-tab-brief
               卡片风格：layui-tab-card
               对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>选项卡</title><link rel="stylesheet" type="text/css" href="layui-v2.2.5/layui/css/layui.css"/><script type="text/javascript" src="layui-v2.2.5/layui/layui.js" charset="UTF-8"></script></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 layui-show">网站设置</div><div class="layui-tab-item">用户管理</div><div class="layui-tab-item">权限分配</div><div class="layui-tab-item">商品管理</div><div class="layui-tab-item">订单管理</div></div></div><hr /><!-- 简洁风格 --><div class="layui-tab layui-tab-brief"><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 layui-show">网站设置</div><div class="layui-tab-item">用户管理</div><div class="layui-tab-item">权限分配</div><div class="layui-tab-item">商品管理</div><div class="layui-tab-item">订单管理</div></div></div><hr /><!-- 卡片风格 --><div class="layui-tab layui-tab-card"><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 layui-show">网站设置</div><div class="layui-tab-item">用户管理</div><div class="layui-tab-item">权限分配</div><div class="layui-tab-item">商品管理</div><div class="layui-tab-item">订单管理</div></div></div><hr /><!-- 带删除的选项卡 --><div class="layui-tab" lay-allowClose="true"><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 layui-show">网站设置</div><div class="layui-tab-item">用户管理</div><div class="layui-tab-item">权限分配</div><div class="layui-tab-item">商品管理</div><div class="layui-tab-item">订单管理</div></div></div><script>layui.use('element', function(){var element = layui.element;});</script></body>
</html>

效果如下：

6.表格

class="layui-table"
               常用属性
                   lay-even 如果设置了该属性，则可以显示隔行换色的效果
                   lay-skin 设置表单边框风格
                       line （行边框风格）
                       row （列边框风格）
                       nob （无边框风格）
                   lay-size 设置表格尺寸
                       sm （小尺寸）
                       lg （大尺寸）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格</title><link rel="stylesheet" type="text/css" href="layui-v2.2.5/layui/css/layui.css"/></head><body><table class="layui-table" lay-size="lg"><colgroup><col width="150"><col width="200"><col></colgroup><thead><tr><th>昵称</th><th>加入时间</th><th>签名</th></tr> </thead><tbody><tr><td>贤心</td><td>2016-11-29</td><td>人生就像是一场修行</td></tr><tr><td>许闲心</td><td>2016-11-28</td><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td></tr></tbody></table><hr><!-- 隔行换色--><table class="layui-table" lay-even lay-skin="row"><colgroup><col width="150"><col width="200"><col></colgroup><thead><tr><th>昵称</th><th>加入时间</th><th>签名</th></tr> </thead><tbody><tr><td>贤心</td><td>2016-11-29</td><td>人生就像是一场修行</td></tr><tr><td>许闲心</td><td>2016-11-28</td><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td></tr><tr><td>贤心</td><td>2016-11-29</td><td>人生就像是一场修行</td></tr><tr><td>许闲心</td><td>2016-11-28</td><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td></tr></tbody></table></body>
</html>

效果如下：

7.面板

由于我的layui的版本有点低，有些东西用不了，在这里我找了一个高版本的layui

下载链接：百度网盘请输入提取码

提取码：1swy

在使用前需要加载element模块

<script>layui.use('element', function(){var element = layui.element;});
</script>

常规面板：
                   class="layui-row layui-col-space15" 常规面板
                   class="layui-col-md6"
                   class="layui-panel"
               卡片面板：
                   class="layui-card" 卡片面板
                   class="layui-card-header"   卡片面板标题头
                   class="layui-card-body"       卡片面板内容
               折叠面板：
                   通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板
                   class="layui-collapse" 折叠面板
                   class="layui-colla-title" 折叠面板标题头
                   class="layui-colla-content layui-show" 折叠的内容
               开启手风琴
                   在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>面板</title><link rel="stylesheet" type="text/css" href="layui-v2.7.0-rc5/layui-v2.7.0-rc5/layui/css/layui.css"/><script type="text/javascript" src="./layui-v2.2.5/layui/layui.js" charset="UTF-8"></script></head><body>  <!-- 常规面板 -->  <div class="layui-row layui-col-space15"><div class="layui-col-md6"><div class="layui-panel"><div style="padding: 30px;">一个面板</div></div>   </div><div class="layui-col-md6"><div class="layui-panel"><div style="padding: 30px;">一个面板</div></div>   </div></div>  <hr /><!-- 卡片面板 --><div class="layui-card"><div class="layui-card-header">卡片面板</div><div class="layui-card-body">卡片式面板面板通常用于非白色背景色的主体内<br>从而映衬出边框投影</div></div><hr /><!-- 折叠面板 --><div class="layui-collapse" lay-accordion><div class="layui-colla-item"><h2 class="layui-colla-title">唱歌</h2><div class="layui-colla-content layui-show">你还要我怎样</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">跳舞</h2><div class="layui-colla-content layui-show">动次打次</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">篮球</h2><div class="layui-colla-content layui-show">在你头上暴扣</div></div></div><script>layui.use('element', function(){var element = layui.element;});</script></body>
</html>

效果如下：

8.时间线

class="layui-timeline"通过设置该属性来设置一个时间线
               class="layui-timeline-item"
               class="layui-icon layui-timeline-axis" 时间线的样式
               class="layui-timeline-content layui-text" 时间线中的内容
               class="layui-timeline-title" 时间线标题

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>时间线</title><link rel="stylesheet" type="text/css" href="layui-v2.7.0-rc5/layui-v2.7.0-rc5/layui/css/layui.css"/><script type="text/javascript" src="./layui-v2.2.5/layui/layui.js" charset="UTF-8"></script></head><body><ul class="layui-timeline"><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">1月1日</h3><p>元旦假期</p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">12月31日</h3><p>距离元旦节还有一天</p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">12月30日</h3><p>距离元旦还有两天</p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><div class="layui-timeline-title">过去</div></div></li></ul></body>
</html>

效果如下：

9.弹出层

在这里需要加载layer模块

<script> layui.use('layer', function(){var layer = layui.layer;
</script>

type - 基本层类型
               title - 标题
               content - 内容
               skin - 样式类名
               area - 宽高
               offset - 坐标
               icon - 图标，信息框和加载层的私有参数
               btn - 按钮

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>弹出层</title><link rel="stylesheet" type="text/css" href="layui-v2.7.0-rc5/layui-v2.7.0-rc5/layui/css/layui.css"/><script type="text/javascript" src="./layui-v2.2.5/layui/layui.js" charset="UTF-8"></script></head><body><script> layui.use('layer', function(){var layer = layui.layer;/* layer.msg('hello'); */ /* layer.alert('开心', {icon: 1});//eg2layer.msg('emo', {icon: 5});//eg3layer.load(1); */layer.confirm('are you ok?', {btn: ['确定', '取消', '未知'] //可以无限个按钮,btn3: function(index, layero){//按钮【按钮三】的回调}}, function(index, layero){//按钮【按钮一】的回调}, function(index){//按钮【按钮二】的回调});/* layer.open({content: 'wo giao',btn: ['1', '2', '3'],yes: function(index, layero){//按钮【1】的回调},btn2: function(index, layero){//按钮【2】的回调//return false 开启该代码可禁止点击该按钮关闭},btn3: function(index, layero){//按钮【3】的回调//return false 开启该代码可禁止点击该按钮关闭},cancel: function(){ //右上角关闭回调//return false 开启该代码可禁止点击该按钮关闭}}); *//* layer.open({content: '加载错误',yes: function(index, layero){layer.close(index); }}); */  });   </script></body>
</html>

效果如下：

10.数据表格

在这里需要加载table模块

<script>layui.use('table', function(){var table = layui.table;
</script>

1.通过lay-filter="test"属性来设置表格
2.三种初始化渲染方式
                   1).方法渲染       用JS方法的配置完成渲染
                   2).自动渲染       HTML配置，自动渲染
                   3).转换静态表格   转化一段已有的表格元素

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>数据表格</title><link rel="stylesheet" type="text/css" href="layui-v2.7.0-rc5/layui-v2.7.0-rc5/layui/css/layui.css"/><script type="text/javascript" src="layui-v2.7.0-rc5/layui-v2.7.0-rc5/layui/layui.js" charset="UTF-8"></script></head><body><!-- 数据表格1.需要加载独立的组件2.通过lay-filter="test"属性来设置表格3.三种初始化渲染方式1).方法渲染     用JS方法的配置完成渲染2).自动渲染     HTML配置，自动渲染3).转换静态表格 转化一段已有的表格元素--><!-- <table id="demo" lay-filter="test"></table> --><!-- <table lay-filter="demo"><thead><tr><th lay-data="{field:'username', width:100}">昵称</th><th lay-data="{field:'experience', width:80, sort:true}">积分</th><th lay-data="{field:'sign'}">签名</th></tr> </thead> --><!-- <table class="layui-table" lay-data="{基础参数}"><thead><tr><th lay-data="{field:'username', width:80}" rowspan="2">联系人</th><th lay-data="{field:'amount', width:120}" rowspan="2">金额</th><th lay-data="{align:'center'}" colspan="3">地址</th></tr><tr><th lay-data="{field:'province', width:80}">省</th><th lay-data="{field:'city', width:120}">市</th><th lay-data="{field:'county', width:300}">详细</th></tr></thead></table> --><table lay-filter="demo"><thead><tr><th lay-data="{field:'username', width:100}">昵称</th><th lay-data="{field:'experience', width:80, sort:true}">积分</th><th lay-data="{field:'sign'}">签名</th></tr> </thead><tbody><tr><td>贤心1</td><td>66</td><td>人生就像是一场修行a</td></tr><tr><td>贤心2</td><td>88</td><td>人生就像是一场修行b</td></tr><tr><td>贤心3</td><td>33</td><td>人生就像是一场修行c</td></tr></tbody></table><script type="text/javascript">layui.use('table', function(){var table = layui.table;//转换静态表格table.init('demo', {height: 315 //设置高度,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致//支持所有基础参数}); //第一个实例/* table.render({elem: '#demo',height: 312,url: '../../demo/table/user/-page=1&limit=30.js' //数据接口,page: true //开启分页,cols: [[ //表头{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},{field: 'username', title: '用户名', width:80},{field: 'sex', title: '性别', width:80, sort: true},{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width: 177},{field: 'experience', title: '积分', width: 80, sort: true},{field: 'score', title: '评分', width: 80, sort: true},{field: 'classify', title: '职业', width: 80},{field: 'wealth', title: '财富', width: 135, sort: true}]]}); *//* 加载*//* table.render({elem: '#demo' //指定原始表格元素选择器（推荐id选择器）,height: 315 //容器高度,cols: [{}] //设置表头//,…… //更多参数参考右侧目录：基本参数选项}); */});</script></body>
</html>

效果如下：