LayUI

最新推荐文章于 2023-07-15 00:24:27 发布

好来污最佳男主角

最新推荐文章于 2023-07-15 00:24:27 发布

阅读量475

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Hello_zbs/article/details/108350511

版权

LayUI 的安装及使⽤

LayUI 的介绍
layui（谐⾳：类UI) 是⼀款采⽤⾃身模块规范编写的前端 UI 框架，遵循原⽣ HTML/CSS/JS 的书写与组织形式，⻔槛极低，拿来即⽤。

由国⼈开发，16年出⼚的框架，其主要提供了很多好看、⽅便的样式，并且基本拿来即⽤，和Bootstrap有些相似，但该框架有个极⼤的好处就是定义了很多前后端交互的样式接⼝，如分⻚表格，只需在前端配置好接⼝，后端则按照定义好的接⼝规则返回数据，即可完成⻚⾯的展示，极⼤减少了后端⼈员的开发成本。

官⽹：https://www.layui.com
官⽅⽂档：https://www.layui.com/doc/

LayUI 的特点
（1）layui属于轻ᰁ级框架，简单美观。适⽤于开发后端模式，它在服务端⻚⾯上有⾮常好的效果。
（2）layui是提供给后端开发⼈员的ui框架，基于DOM驱动。

下载与使⽤

在官⽹⾸⻚下载到 layui 的最新版。⽬录结构如下
获得 layui 后，将其完整地部署（拷⻉到项⽬中）到你的项⽬⽬录，你只需要引⼊下述两个⽂件：
基本的⼊⻔⻚⾯

<!DOCTYPE html>
<html> <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1">
 
<title>开始使⽤layui</title>
 <link rel="stylesheet" href="layui/css/layui.css">
</head> <body>
<!-- 你的HTML代码 -->
<script src="layui/layui.js"></script> <script>
 // 模块和回调函数
 // ⼀般直接写在⼀个js⽂件中
 layui.use(['layer', 'form'], function(){
 var layer = layui.layer
 ,form = layui.form;
 
layer.msg('Hello World');
 });
</script>
</body>
</html>

还需要声明需要使⽤的模块和回调函数。参照官⽅⽂档，选择⾃⼰想要的效果就⾏。
⽐如：

<script>
 // 注意：导航 依赖 element 模块，否则⽆法进⾏功能性操作
 layui.use('element', function(){
 var element = layui.element;
 //…
 });
</script>

⻚⾯元素

布局
布局容器

固定宽度
将栅格放⼊⼀个带有 class=“layui-container” 的特定的容器中，以便在⼩屏幕以上的设备中固定宽度，让列可控。

<div class="layui-container">
 <div class="layui-row">
 ……
 </div>
</div>

完整宽度
可以不固定容器宽度。将栅格或其它元素放⼊⼀个带有 class=“layui-flfluid” 的容器中，那么宽度将不会固定，⽽是 100% 适应

<div class="layui-fluid">
 ……
</div>

栅格系统

为了丰富⽹⻚布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能⼒，layui 引进了⼀套具备响应式能⼒的栅格系统。将容器进⾏了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌⾯中/⼤尺⼨四种不同的屏幕下发挥着各⾃的作⽤。
栅格布局规则

采⽤ layui-row 来定义⾏，如：

<div class="layui-row"></div>

采⽤类似 layui-col-md* 这样的预设类来定义⼀组列（column），且放在⾏（row）内。其中：

变量 md 代表的是不同屏幕下的标记
变量 * 代表的是该列所占⽤的12等分数（如6/12），可选值为 1 - 12
如果多个列的“等分数值”总和等于12，则刚好满⾏排列。如果⼤于12，多余的列将⾃动另起⼀⾏。
3. 列可以同时出现最多四种不同的组合，分别是：xs（超⼩屏幕，如⼿机）、sm（⼩屏幕，如平板）、md（桌⾯中等屏幕）、lg（桌⾯⼤型屏幕）。
4. 可对列追加类似 layui-col-space5、 layui-col-md-offffset3 这样的预设类来定义列的间距和偏移。
5. 可以在列（column）元素中放⼊你⾃⼰的任意元素填充内容

示例：

<h3>常规布局（以中型屏幕桌⾯为例）：</h3> <div class="layui-row">
 <div class="layui-col-md9" style="background-color: #00F7DE;">
 你的内容 9/12
 </div>
 <div class="layui-col-md3" style="background-color: rosybrown;">
 你的内容 3/12
 </div>
</div>

响应式规则

栅格的响应式能⼒，得益于CSS3媒体查询（Media Queries）的强⼒⽀持，从⽽针对四类不同尺⼨的屏幕，进⾏相应的适配处理。
在这里插入图片描述

<h3>平板、桌⾯端的不同表现：</h3> <div class="layui-row">
 <div class="layui-col-sm6 layui-col-md4" 
 style="background-color: thistle">
 平板≥768px：6/12 | 桌⾯端≥992px：4/12
 </div>
 </div> <div class="layui-row"> 
 <div class="layui-col-sm4 layui-col-md6" 
 style="background-color: mediumaquamarine;">
 平板≥768px：4/12 | 桌⾯端≥992px：6/12
 </div>
</div> <div class="layui-row">
 <div class="layui-col-sm12 layui-col-md8"
 style="background-color: coral">
 平板≥768px：12/12 | 桌⾯端≥992px：8/12
 </div>
</div>

列边距

通过“列间距”的预设类，来设定列之间的间距。且⼀⾏中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进⼀步保证分列的宽度精细程度。我们结合⽹⻚常⽤的边距，预设了 12 种不同尺⼨的边距，分别是：
在这里插入图片描述

示例：

<h3>列间距</h3> <div class="layui-row layui-col-space10">
 <div class="layui-col-md4" >
 <!-- 需要在layui-col-md4⾥⾯再加⼀层div -->
 <div style="background-color: #009688;">
 1/3
</div>
 </div>
 <div class="layui-col-md4">
 <div style="background-color: burlywood;">
 1/3
 </div>
 </div>
<div class="layui-col-md4">
 <div style="background-color: silver;">
 1/3
 </div>
 </div>
</div>

注：

layui-col-space：设置后不起作⽤主要是因为设置的是padding,也就是说是向内缩，所以设置背景⾊padding也是会添上颜⾊，看起来好像没有间距⼀样。可以在⾥⾯在加⼀个div，来达到⽬的。
间距⼀般不⾼于30px，如果超过30，建议使⽤列偏移。

列偏移

对列追加类似 layui-col-md-offffset* 的预设类，从⽽让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
如：layui-col-md-offffset3，即代表在“中型桌⾯屏幕”下，让该列向右偏移 3 个列宽度

<h3>列偏移</h3> <div class="layui-row">
 <div class="layui-col-md4" style="background-color: rosybrown;">
 4/12
 </div>
 <div class="layui-col-md4 layui-col-md-offset4"
 style="background-color: cornflowerblue;">
 偏移4列，从⽽在最右
 </div>
</div>

注：列偏移可针对不同屏幕的标准进⾏设定，在当前设定的屏幕下有效，当低于桌⾯屏幕的规定的临界值，就会堆叠排列。

列嵌套
可以对栅格进⾏⽆穷层次的嵌套。在列元素（layui-col-md*）中插⼊⾏元素（layui-row），即可完成嵌套。

<h3>列嵌套</h3> <div class="layui-row layui-col-space5">
 <div class="layui-col-md5" style="background-color: thistle;">
 <div class="layui-row">
 <div class="layui-col-md3" style="background-color: burlywood;" >
 内部列
 </div>
 <div class="layui-col-md5" style="background-color: indianred;">
 内部列
 </div>
 <div class="layui-col-md4" style="background-color:
mediumaquamarine;">
 内部列
 </div>
 </div>
 </div>

</div>

基本元素
按钮
⽤法
向任意HTML元素设定class=“layui-btn”，建⽴⼀个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮⻛格。

<!-- 基础按钮 -->
<button type="button" class="layui-btn">⼀个标准的按钮</button> <a> href="http://www.layui.com" class="layui-btn">⼀个可跳转的按钮</a> <div class="layui-btn">⼀个按钮</div>

主题
在这里插入图片描述

示例：
在这里插入图片描述
尺⼨

<!-- 不同尺⼨的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">⼤型</button> 
<button class="layui-btn">默认
</button> <button class="layui-btn layui-btn-sm layui-btn-danger">⼩型</button> <button class="layui-btn layui-btn-xs">迷你</button>

圆⻆
layui-btn-radius

<button class="layui-btn layui-btn-radius">默认按钮
</button> <button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮
</button> <button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮
</button> <button class="layui-btn layui-btn-warm layui-btn-radius">暖⾊按钮
</button> <button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮
</button> <button class="layui-btn layui-btn-disabled layui-btn-radius">禁⽤按钮</button>

图标

 <button type="button" class="layui-btn">
 <i class="layui-icon"></i> 添加
</button> <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
 <i class="layui-icon">ဂ</i> 刷新
</button>

导航
导航⼀般指⻚⾯引导性频道集合，多以菜单的形式呈现，可应⽤于头部和侧边。⾯包屑结构简单，⽀持⾃定义分隔符。
依赖加载模块：element
实现步骤：

引⼊的资源

<link rel="stylesheet" href="layui/css/layui.css"> 
<script src="layui/layui.js"></script>

依赖加载模块

<script type="text/javascript">
 // 注意：导航 依赖 element 模块，否则⽆法进⾏功能性操作
 layui.use('element', function(){
 var element = layui.element;
 });
</script>

显示指定类型的导航

⽔平导航

<ul class="layui-nav">
 <li class="layui-nav-item"><a href="">最新活动</a></li>
 <li class="layui-nav-item layui-this"><a href="">产品</a></li>
 <li class="layui-nav-item"><a href="">⼤数据</a></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><a href="">电商平台</a></dd>
 </dl>
 </li>
 <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

垂直/侧边导航

<ul class="layui-nav layui-nav-tree" >
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
 <li class="layui-nav-item layui-nav-itemed">
 <a href="javascript:;">默认展开</a>
 <dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
 <dd><a href="javascript:;">选项2</a></dd>
 <dd><a href="">跳转</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><a href="">电商平台</a></dd>
 </dl>
 </li>
 <li class="layui-nav-item"><a href="">产品</a></li>
 <li class="layui-nav-item"><a href="">⼤数据</a></li>
</ul>

⽔平、垂直、侧边三个导航的HTML结构是完全⼀样的，不同的是：

⽔平导航：layui-nav
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side

导航主题
通过对导航追加CSS背景类，让导航呈现不同的主题⾊

<!-- 如定义⼀个墨绿背景⾊的导航 -->
<ul class="layui-nav layui-bg-move" >
 …
</ul>

⽔平导航⽀持的其它背景主题有：layui-bg-cyan（藏⻘）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航⽀持的其它背景主题有：layui-bg-cyan（藏⻘）

⾯包屑

<span class="layui-breadcrumb">
 <a href="">⾸⻚</a>
 <a href="">国际新闻</a>
 <a href="">亚太地区</a>
 <a><cite>正⽂</cite></a>
</span>

你还可以通过设置属性 lay-separator="" 来⾃定义分隔符。例如：

 <span class="layui-breadcrumb" lay-separator="-">
 <a href="">⾸⻚</a>
 <a href="">国际新闻</a>
 <a href="">亚太地区</a>
 <a><cite>正⽂</cite></a>
</span>

选项卡
导航菜单可应⽤于头部和侧边，⽀持响应式，⽀持删除选项卡等功能。
依赖加载模块：element
实现步骤

引⼊的资源

<link rel="stylesheet" href="layui/css/layui.css"> 
<script src="layui/layui.js"></script>

依赖加载模块

<script type="text/javascript">
 // 注意：选项卡 依赖 element 模块，否则⽆法进⾏功能性操作
 layui.use('element', function(){
 var element = layui.element;
 });
</script>

加载HTML

<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">内容1</div>
 <div class="layui-tab-item">内容2</div>
 <div class="layui-tab-item">内容3</div>
 <div class="layui-tab-item">内容4</div>
 <div class="layui-tab-item">内容5</div>
 </div>
</div>

选项卡⻛格

默认⻛格：layui-tab
简洁⻛格需要追加class：layui-tab-brief
卡⽚⻛格需要追加class：layui-tab-card

带删除的选项卡
可以对⽗层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除

<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">内容1</div>
 <div class="layui-tab-item">内容2</div>
 <div class="layui-tab-item">内容3</div>
 <div class="layui-tab-item">内容4</div>
 <div class="layui-tab-item">内容5</div>
 </div>
</div>

表格
常规⽤法

<table class="layui-table">
 <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>
 </tbody>
</table>

基础属性
在这里插入图片描述
你所需要的基础属性写在table标签上，例如：

<!-- ⼀个带有隔⾏背景，且⾏边框⻛格的⼤尺⼨表格 -->
<table class="layui-table" lay-even lay-size="lg" 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>
 </tbody>
</table>

表单

依赖加载模块：form

在⼀个容器中设定 class=“layui-form” 来标识⼀个表单元素块

 <form class="layui-form" action="">
 
</form>

基本的⾏区块结构，它提供了响应式的⽀持。可以换成其他结构，但必须要在外层容器中定
义class=“layui-form”，form模块才能正常⼯作。

<div class="layui-form-item">
 <label class="layui-form-label">标签区域</label>
 <div class="layui-input-block">
 原始表单元素区域
 </div>
</div>

输⼊框

<input type="text" name="title" required lay-verify="required" placeholder="请
输⼊标题" autocomplete="off" class="layui-input" />

required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class=“layui-input”：layui.css提供的通⽤CSS类
下拉选择框

<select name="city" lay-verify="">
 <option value="">请选择⼀个城市</option>
 <option value="010">北京</option>
 <option value="021">上海</option>
 <option value="0571">杭州</option>
</select>

属性selected可设定默认项
属性disabled开启禁⽤，select和option标签都⽀持

<select name="city" lay-verify="">
 <option value="010">北京</option>
 <option value="021" disabled>上海（禁⽤效果）</option>
 <option value="0571" selected>杭州</option>
</select>

可以通过 optgroup 标签给select分组

<select name="quiz">
 <option value="">请选择</option>
 <optgroup label="城市记忆">
 <option value="你⼯作的第⼀个城市">你⼯作的第⼀个城市？</option>
 </optgroup>
 <optgroup label="学⽣时代">
 <option value="你的⼯号">你的⼯号？</option>
 <option value="你最喜欢的⽼师">你最喜欢的⽼师？</option>
 </optgroup>
</select>

通过设定属性 lay-search 来开启搜索匹配功能

<select name="city" lay-verify="" lay-search>
 <option value="010">layer</option>
 <option value="021">form</option>
 <option value="0571" selected>layim</option>
</select>

复选框

<h2>默认⻛格：</h2> <input type="checkbox" name="" title="写作" 
checked> <input type="checkbox" name="" title="发呆">
 <input type="checkbox" name="" title="禁⽤" disabled>
<h2>原始⻛格：</h2> 
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
 <input type="checkbox" name="" title="发呆" lay-skin="primary"> 
 <input type="checkbox" name="" title="禁⽤" lay-skin="primary" disabled>
属性tit

le可⾃定义⽂本（温馨提示：如果只想显示复选框，可以不⽤设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的⻛格（原始⻛格：lay-skin=“primary”）
设置value="1"可⾃定义值，否则选中时返回的就是默认的on

开关
将复选框checkbox，通过设定 lay-skin=“switch” 形成了开关⻛格

<input type="checkbox" name="xxx" lay-skin="switch"> 
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
 <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭"> 
 <input type="checkbox" name="aaa" lay-skin="switch" disabled>

属性checked可设定默认开
属性disabled开启禁⽤
属性lay-text可⾃定义开关两种状态的⽂本（两种⽂本⽤ “|” 隔开）
设置value="1"可⾃定义值，否则选中时返回的就是默认的on
单选框

<input type="radio" name="sex" value="nan" title="男"> 
<input type="radio" name="sex" value="nv" title="⼥" checked> 
<input type="radio" name="sex" value="" title="中性" disabled>

属性title可⾃定义⽂本
属性disabled开启禁⽤
设置value="xxx"可⾃定义值，否则选中时返回的就是默认的on
⽂本域

<textarea name="remark" required lay-verify="required" placeholder="请输⼊个⼈介
绍" class="layui-textarea"></textarea>

class=“layui-textarea”：layui.css提供的通⽤CSS类
组装⾏内表单

<div class="layui-form-item">
 <div class="layui-inline">
 <label class="layui-form-label">范围</label>
 <div class="layui-input-inline" style="width: 100px;">
 <input type="text" name="price_min" placeholder="￥"
autocomplete="off" class="layui-input">
 </div>
 <div class="layui-form-mid">-</div>
 <div class="layui-input-inline" style="width: 100px;">
 <input type="text" name="price_max" placeholder="￥"
 autocomplete="off" class="layui-input">
 </div>
 </div>
</div>

class=“layui-inline”：定义外层⾏内
class=“layui-input-inline”：定义内层⾏内
忽略美化渲染
可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进⾏美化渲染，即保留系统⻛格。

<input type="radio" name="sex" value="nan" title="男" lay-ignore>

表单⽅框⻛格
通过追加 layui-form-pane 的class，来设定表单的⽅框⻛格。

<form class="layui-form layui-form-pane" action="">
 <!--
 内部结构都⼀样，值得注意的是 复选框/开关/单选框 这些组合在该⻛格下需要额外添加 pane属性
（否则 会看起来⽐较别扭），如：
 -->
 <div class="layui-form-item" pane>
 <label class="layui-form-label">单选框</label>
 <div class="layui-input-block">
 <input type="radio" name="sex" value="男" title="男">
 <input type="radio" name="sex" value="⼥" title="⼥" checked>
 </div>
 </div>
</form>

组件示例
弹出层
模块加载名称：layer，独⽴版本：layer.layui.com
使⽤场景
由于layer可以独⽴使⽤，也可以通过Layui模块化使⽤。所以请按照你的实际需求来选择。
在这里插入图片描述

作为独⽴组件使⽤ layer

<!-- 引⼊好layer.js后，直接⽤即可 -->
<script src="layer.js"></script> <script>
 layer.msg('hello');
</script>

在 layui 中使⽤ layer

layui.use('layer', function(){
 var layer = layui.layer;
 
 layer.msg('hello');
});

基础参数

type - 基本层类型

类型：Number，默认：0
可传⼊的值有：
0（信息框，默认）
1（⻚⾯层）
2（iframe层）
3（加载层）
4（tips层）

title - 标题

类型：String/Array/Boolean，默认：‘信息’
title⽀持三种类型的值：
若传⼊的是普通的字符串，如 title:‘我是标题’，那么只会改变标题⽂本；
若需要⾃定义样式，可以title: [‘⽂本’‘font-size:18px;’]，数组第⼆项可以写任意
css样式；
若你不想显示标题栏，可以 title: false

content - 内容

类型：String/DOM/Array，默认：’ ’
content可传⼊的值是灵活多变的，不仅可以传⼊普通的html内容，还可以指定DOM。

/* ⻚⾯层 */
layer.open({
 type:1,
 title:"系统消息",
 // content可以传⼊任意的⽂本或html
 content:"<div style='height:100px;width:200px'>Hello</div>"
});
/* iframe */
layer.open({
 type:2,
 title:"系统消息",
title:"系统消息",
 // content是⼀个URL，如果你不想让iframe出现滚动条，你还可以content: ['url',
'no']
 content:"http://www.baidu.com"
 // content:["http://www.baidu.com",'no']
});
/* tips层 */
layer.open({
 type: 4,
 content: ['内容', '#id'] //数组第⼆项即吸附元素选择器或者DOM
});

area - 宽⾼

类型：String/Array，默认：‘auto’
在默认状态下，layer是宽⾼都⾃适应的。
当定义宽度时，你可以area:‘500px’，⾼度仍然是⾃适应的。
当宽⾼都要定义时，你可以area: [‘500px’, ‘300px’]。

icon - 图标

注：信息框和加载层的私有参数。
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认层可以传⼊0-6。如果是加载层，可以传⼊0-2。

// eg1
layer.alert('酷毙了', {icon: 1});
// eg2
layer.msg('不开⼼。。', {icon: 5});
// eg3
layer.load(1); // ⻛格1的加载

示例

// eg1
layer.alert('很⾼兴⻅到你
!', {icon: 6});
// eg2
layer.msg('你愿意和我做朋友么？', {
 time: 0, //不⾃动关闭
 btn: ['当然愿意', '狠⼼拒绝'], // 按钮
yes: function(index){
 layer.close(index); // 关闭当前弹出框
 layer.msg('新朋友，你好！', {
 icon: 6, // 图标
 btn: ['开⼼','快乐']
 });
 }
});
// eg3
layer.msg('这是常⽤的弹出层');
// eg4
layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5});
// eg5
layer.msg('玩命加载中...=￣ω￣=', function(){
 // 关闭后的操作
 layer.msg('(⊙o⊙)？');
});

⽇期与时间选择
模块加载名称：laydate，独⽴版本：http://www.layui.com/laydate/
layDate 包含了⼤量的更新，其中主要以：年选择器、年⽉选择器、⽇期选择器、时间选择器、⽇期时间选择器五种类型的选择⽅式。

快速使⽤
和 layer ⼀样，可以在 layui 中使⽤ layDate，也可直接使⽤ layDate 独⽴版，请按照实际需求来选择。
在这里插入图片描述
在layui模块中使⽤

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>⽇期与时间选择</title>
 <link rel="stylesheet" href="layui/css/layui.css">
 </head>
 <body>
<div class="layui-inline">
 <input type="text" class="layui-input" id="date1" />
 </div>
 </body>
 <script src="layui/layui.js"></script>
 <script type="text/javascript">
 layui.use('laydate', function(){
 var laydate = layui.laydate;
//执⾏⼀个laydate实例
 laydate.render({
 elem: '#date1' //指定元素
 });
 });
 </script>
</html>

基础参数

elem - 绑定元素

类型：String/DOM，默认值：⽆
必填项，⽤于绑定执⾏⽇期渲染的元素，值⼀般为选择器，或DOM对象

laydate.render({
 elem: '#test' //或 elem: document.getElementById('test')、elem:
lay('#test') 等
});

type - 控件选择类型

类型：String，默认值：date
⽤于单独提供不同的选择器类型，可选值如下表：

在这里插入图片描述

//年选择器
laydate.render({
 elem: '#test'
 ,type: 'year'
});
//年⽉选择器
laydate.render({
 elem: '#test'
 ,type: 'month'
});
//⽇期选择器
laydate.render({
 elem: '#test'
 //,type: 'date' //默认，可不填
});
//时间选择器
laydate.render({
 elem: '#test'
 ,type: 'time'
});
//⽇期时间选择器
laydate.render({
 elem: '#test'
 ,type: 'datetime'
});

format - ⾃定义格式

类型：String，默认值：yyyy-MM-dd
通过⽇期时间各⾃的格式符和⻓度，来设定⼀个你所需要的⽇期格式。layDate
⽀持的格式如下：

通过上述不同的格式符组合成⼀段⽇期时间字符串，可任意排版。

//⾃定义⽇期格式
laydate.render({
elem: ‘#test’
,format: 'yyyy年MM⽉dd⽇//可任意组合
});

value - 初始值

类型：String，默认值：new Date()
⽀持传⼊符合format参数设定的⽇期格式字符，或者 new Date()

// 传⼊符合format格式的字符给初始值
laydate.render({
 elem: '#test'
 ,value: '2018-08-18' //必须遵循format参数设定的格式
});
// 传⼊Date对象给初始值
laydate.render({
 elem: '#test'
 ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});

分⻚
模块加载名称：laypage
快速使⽤
laypage 的使⽤⾮常简单，指向⼀个⽤于存放分⻚的容器，通过服务端得到⼀些初始值，即可完成分⻚渲染。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>分⻚</title>
 <link rel="stylesheet" href="layui/css/layui.css">
 </head>
 <body>
 <div id="test1"></div>
 </body>
 <script src="layui/layui.js"></script>
 <script type="text/javascript">
 layui.use('laypage', function(){
 var laypage = layui.laypage;
 
 //执⾏⼀个laypage实例
 laypage.render({
elem: 'test1' //注意，这⾥的 test1 是 ID，不⽤加 # 号
 ,count: 50 //数据总数，从服务端得到
 });
 });
 </script>
</html>

基础参数
通过核⼼⽅法：laypage.render(options) 来设置基础参数。
在这里插入图片描述

jump - 切换分⻚的回调
当分⻚被切换时触发，函数返回两个参数：obj（当前分⻚的所有选项值）、fifirst（是否⾸次，⼀般⽤于初始加载的判断）

laypage.render({
elem: 'page'
 ,count: 100 //数据总数，从服务端得到
 ,groups:10 // 连续出现的⻚码个数
 ,layout:['prev', 'page', 'next','limit','count'] // ⾃定义排版
 ,limits:[5,10,20] // layout属性设置了limit值，可会出现条数下拉选择框
 ,jump: function(obj, first){
 // obj包含了当前分⻚的所有参数，⽐如：
console.log(obj.curr); //得到当前⻚，以便向服务端请求对应⻚的数据。
 console.log(obj.limit); //得到每⻚显示的条数
 //⾸次不执⾏
 if(!first){
 //do something
 }
 }
});

数据表格
模块加载名称：table
快速使⽤
创建⼀个table实例最简单的⽅式是，在⻚⾯放置⼀个元素，然后通过 table.render() ⽅法指定该容器。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>table数据表格</title>
 <link rel="stylesheet" href="layui/css/layui.css">
 </head>
 <body>
<table id="demo"></table>
 </body>
 
 <script src="layui/layui.js" type="text/javascript" ></script>
 <script type="text/javascript">
 layui.use('table', function(){
 var table = layui.table;
// 第⼀个实例
 table.render({
 elem: '#demo'
 ,url: 'user.json' // 数据接⼝
 ,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}
 ]]
 });
 
 });
 </script>
</html>

数据接⼝ user.json

{
 "code": 0,
 "msg": "",
 "count": 50,
 "data": [{
 "id": 10000,
 "username": "user-0",
 "sex": "⼥",
 "city": "城市-0",
 "sign": "签名-0" 
 },
{
"id": 10001,
 "username": "user-1",
 "sex": "男",
 "city": "城市-1",
 "sign": "签名-1"
 },
 {
 "id": 10002,
 "username": "user-2",
 "sex": "⼥",
 "city": "城市-2",
 "sign": "签名-2"
 },
 {
"id": 10004,
 "username": "user-4",
"sex": "男",
 "city": "城市-4",
 "sign": "签名-4"
 }
 ] }

三种初始化渲染⽅式在这里插入图片描述
⽅法渲染

将基础参数的设定放在了JS代码中，且原始的 table 标签只需要⼀个选择器

<table id="demo"></table>

渲染表格

layui.use('table', function(){
 var table = layui.table;
 // 执⾏渲染
 table.render({
 elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
,url: 'user.json' // 数据接⼝
 ,height: 315 // 容器⾼度
 ,page:true // 开启分⻚
 ,cols: [[ // 设置表头
 {field: 'id', title: 'ID'}
,{field: 'username', title: '⽤户名'}
 ,{field: 'sex', title: '性别'}
 ]]
 }); 
});

注：table.render()⽅法返回⼀个对象：var tableIns = table.render(options)，可⽤于对当前表格进⾏“重载”等操作。

⾃动渲染
在⼀段 table 容器中配置好相应的参数，由 table 模块内部⾃动对其完成渲染，⽽⽆需你写初始的渲染⽅法。

带有 class=“layui-table” 的标签。 2) 对标签设置属性 lay-data="" ⽤于配置⼀些基础参数 3) 在标签中设置属性lay-data=""⽤于配置表头信息

 <table class="layui-table" lay-data="{url:'user.json'}">
 <thead>
 <tr>
 <th lay-data="{field:'id'}">ID</th>
 <th lay-data="{field:'username'}">⽤户名</th>
<th lay-data="{field:'sex', sort: true}">性别</th>
 </tr>
 </thead>
</table>

转换静态表格
⻚⾯已经存在了⼀段有内容的表格，由原始的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>
 </tbody>
</table>

执⾏⽤于转换表格的JS⽅法

layui.use('table', function(){
 var table = layui.table;
 // 转换静态表格
 table.init('demo', {
 height: 315 // 设置⾼度
 // ⽀持所有基础参数
 });
});

基础参数使⽤的场景
// 场景⼀：下述⽅法中的键值即为基础参数项

table.render({
 height: 300
 ,url: 'user.json'
});
 // 场景⼆：下述 lay-data ⾥⾯的内容即为基础参数项，切记：值要⽤单引号
<table lay-data="{height:300, url:'user.json'}" lay-filter="demo"> ……
</table>
// 更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); // 转化静态表格
> var tableObj = table.render({});
 tableObj.reload(options); // 重载表格

开启分⻚

<table id="demo"></table>
// JS实现代码
layui.use('table', function(){
 var table = layui.table;
 // 执⾏渲染
 table.render({
elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
 ,url: 'user.json' // 数据接⼝
 ,height: 315 // 容器⾼度
 ,page:true // 开启分⻚
 ,cols: [[ // 设置表头
{field: 'id', title: 'ID'}
 ,{field: 'username', title: '⽤户名'}
 ,{field: 'sex', title: '性别'}
]]
 }); 
});

开启头部⼯具栏

<table id="demo" lay-filter="demo"></table>
<!-- 表格⼯具栏 -->
<script type="text/html" id="toolbarDemo">
 <div class="layui-btn-container">
 <!-- lay-event 给元素绑定事件名 -->
 <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
 获取选中⾏数据
 </button>
 <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
 获取选中数⽬
 </button>
 <button class="layui-btn layui-btn-sm" lay-event="isAll">
 验证是否全选
</button>
 </div>
</script>
<!-- 表头⼯具栏 -->
<script type="text/html" id="barDemo">
 <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除
</a>
</script>
layui.use('table', function(){
 var table = layui.table;
// 执⾏渲染
 table.render({
 elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
 ,url: 'user.json' // 数据接⼝
 ,height: 315 // 容器⾼度
 ,page:true // 开启分⻚
 ,cols: [[ // 设置表头
{field: 'id', title: 'ID'}
 ,{field: 'username', title: '⽤户名'}
 ,{field: 'sex', title: '性别'}
 ,{title:'操作', toolbar: '#barDemo'} // 绑定表头⼯具栏
 ]]
 ,toolbar: '#toolbarDemo' // 开启头部⼯具栏，并为其绑定左侧模板
 });
  /**
 * 头⼯具栏事件
 * 语法：
 table.on('toolbar(demo)', function(obj){
 });
 注：demo表示选择器元素上设置的lay-filter属性值
 */
table.on('toolbar(demo)', function(obj){
 // obj.config.id 当前选择器的id属性值，即demo
 // 获取当前表格被选中的记录对象，返回数组
 var checkStatus = table.checkStatus(obj.config.id);
 // obj.event 得到当前点击元素的事件名
 switch(obj.event){
 case 'getCheckData':
 // 获取被选中的记录的数组
var data = checkStatus.data;
 // 将数组数据解析成字符串
 layer.alert(JSON.stringify(data));
 break;
 case 'getCheckLength':
 var data = checkStatus.data;
 layer.msg('选中了：'+ data.length + ' 个');
 break;
case 'isAll':
 // checkStatus.isAll 判断记录是否被全选
 layer.msg(checkStatus.isAll ? '全选': '未全选');
 break;
 // ⾃定义头⼯具栏右侧图标 - 提示
 case 'LAYTABLE_TIPS':
 layer.alert('这是⼯具栏右侧⾃定义的⼀个图标按钮');
 break;
 };
 });
/**
 * 监听⾏⼯具事件
 */
 table.on('tool(demo)', function(obj){
 // 得到当前操作的tr的相关信息
 var data = obj.data;
 if(obj.event === 'del'){
 // 确认框
 layer.confirm('真的删除⾏么', function(index){
 // 删除指定tr
 obj.del();
 // index 当前弹出层的下标，通过下标关闭弹出层
layer.close(index);
 });
 } else if(obj.event === 'edit'){
 // 输⼊框
 layer.prompt({
 // 表单元素的类型 0=⽂本框 1=密码框 2=⽂本域
 formType: 0
 ,value: data.username
 }, function(value, index){
 // 修改指定单元格的值
 // value表示输⼊的值
obj.update({
 username: value
 });
 // 关闭弹出层
 layer.close(index);
 });
 }
 });
 
});

开启单元格编辑

<table class="layui-table" lay-data="{url:'user.json', id:'demo'}" layfilter="demo">
 <thead>
 <tr>
 <th lay-data="{type:'checkbox'}">ID</th>
 <th lay-data="{field:'id', sort: true}">ID</th>
 <th lay-data="{field:'username', sort: true, edit: 'text'}">⽤
户名</th>
<th lay-data="{field:'sex', edit: 'text'}">性别</th>
 <th lay-data="{field:'city', edit: 'text'}">城市</th>
 <th lay-data="{field:'experience', sort: true, edit: 'text'}">
积分</th>
 </tr>
 </thead>
</table>

好来污最佳男主角

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
LayUI

LayUI 的安装及使⽤LayUI 的介绍layui（谐⾳：类UI) 是⼀款采⽤⾃身模块规范编写的前端 UI 框架，遵循原⽣ HTML/CSS/JS 的书写与组织形式，⻔槛极低，拿来即⽤。由国⼈开发，16年出⼚的框架，其主要提供了很多好看、⽅便的样式，并且基本拿来即⽤，和Bootstrap有些相似，但该框架有个极⼤的好处就是定义了很多前后端交互的样式接⼝，如分⻚表格，只需在前端配置好接⼝，后端则按照定义好的接⼝规则返回数据，即可完成⻚⾯的展示，极⼤减少了后端⼈员的开发成本。官⽹：https://ww
复制链接

扫一扫