LayUI前框框架普及版

已于 2023-06-09 22:00:01 修改
阅读量1.3k 收藏 4
点赞数 1
文章标签： layui 前端 javascript vue vue.js
于 2023-06-07 21:14:53 首次发布
本文链接：https://blog.csdn.net/zhangchen124/article/details/131096227
版权

LayUI

一、课程目标

1. 【了解】LayUI框架                       
2. 【理解】LayUI基础使用
3. 【掌握】LayUI页面元素
4. 【掌握】LayUI内置模块

二、LayUI基本使用

2.1 概念

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

2.2 下载

2.2.1 官网下载

官网 : https://layuion.com/

官方文档:https://layuion.com/docs/

2.2.2 目录结构

官网下载后，解压文件，目录结构如下

  ├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

./layui/css/layui.css
./layui/layui.js

2.3 简单实例

LayUI的使用基本分为两个方面：

**页面元素：**主要是进行页面样式的修改，通过指定的layUI的class进行设置，只需要引入LayUI.css即可使用

**内置模块：**进行页面动态效果功能的展示，通过指定的layUI的相应代码进行书写，需要引入LayUI.js并按照指定格式进行书写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=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>

三、LayUI页面元素

layui 提倡返璞归真，遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的 HTML 和 CSS 代码，不同的是，在 HTML 结构上及 CSS 定义上需要稍稍遵循一定的规范。

3.1 栅格

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统，将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

  1. 采用 layui-row 来定义行，如：

    2.采用类似 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-offset3 这样的预设类来定义列的间距和偏移。
    5.最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

3.1.1 示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lCBlw3ED-1686143517856)(LayUI.assets/image-20210220084437679.png)]

<div class="layui-container">  
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9">
      你的内容 9/12
    </div>
    <div class="layui-col-md3">
      你的内容 3/12
    </div>
  </div>
   
  移动设备、平板、桌面端的不同表现：
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
      移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
      移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
  </div>
</div>

3.2 颜色

视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感，而 layui 提供的颜色，清新而不乏深沉，互相柔和，不过分刺激大脑皮层的神经反应，形成越久越耐看的微妙影像。合理搭配，可与各式各样的网站避免违和，从而使你的 Web 平台看上去更为融洽。

3.2.1 常用主色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PTIVt9RN-1686143517857)(LayUI.assets/image-20210220084729592.png)]

3.2.2 场景色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l3neaTYF-1686143517858)(LayUI.assets/image-20210220084741838.png)]

3.2.3 极简中性色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yUWBnEv0-1686143517860)(LayUI.assets/image-20210220084751565.png)]

3.2.4 内置的背景色CSS类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WrMd6lqD-1686143517862)(LayUI.assets/image-20210220084805171.png)]

3.3 字体图标

layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

3.3.1 使用

通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class

例如：

<i class="layui-icon layui-icon-face-smile"></i>

3.3.2 内置图标一览表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38tEaJP4-1686143517862)(LayUI.assets/image-20210220085050453.png)]

更多： https://www.layui.com/doc/element/icon.html

3.4 动画

layui 的动画全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9无动画）

3.4.1 使用

动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如：

其中 layui-anim 是必须的，后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up"></div>
 
循环动画，追加：layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>

3.4.2 基本动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K0THwV4w-1686143517864)(LayUI.assets/image-20210220085253278.png)]

3.5 按钮

layUI通过样式设置，可以将任意元素设置为相应的按钮样式

3.5.1 基本使用

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

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

3.5.2 主题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpltfHeq-1686143517866)(LayUI.assets/image-20210220085732830.png)]

名称组合
原始按钮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”

3.5.3 尺寸

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51pM9DRb-1686143517867)(LayUI.assets/image-20210220085821417.png)]

尺寸组合
大型按钮class=“layui-btn layui-btn-lg”
默认按钮class=“layui-btn”
小型按钮class=“layui-btn layui-btn-sm”
迷你按钮class=“layui-btn layui-btn-xs”

可以与主题按钮组合使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0iOlsvXW-1686143517870)(LayUI.assets/image-20210220085919592.png)]

尺寸组合
大型百搭class=“layui-btn layui-btn-lg layui-btn-normal”
正常暖色class=“layui-btn layui-btn-warm”
小型警告class=“layui-btn layui-btn-sm layui-btn-danger”
迷你禁用class=“layui-btn layui-btn-xs layui-btn-disabled”

也可以根据所在块自适应大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7IaxKLZZ-1686143517871)(LayUI.assets/image-20210220085942658.png)]

<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

3.5.4 圆角

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aJAOzTM6-1686143517872)(LayUI.assets/image-20210220090506559.png)]

主题组合
原始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”

3.5.5 图标按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1GvGOvj5-1686143517874)(LayUI.assets/image-20210220090646395.png)]

<button type="button" class="layui-btn">
  <i class="layui-icon">&#xe608;</i> 添加
</button>
 
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
  <i class="layui-icon">&#x1002;</i>
</button>

3.5.6 按钮组

将按钮放入一个*class=“layui-btn-group”*元素中，即可形成按钮组，按钮本身仍然可以随意搭配

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3rcyhUw8-1686143517876)(LayUI.assets/image-20210220090855049.png)]

<div class="layui-btn-group">
  <button type="button" class="layui-btn">增加</button>
  <button type="button" class="layui-btn">编辑</button>
  <button type="button" class="layui-btn">删除</button>
</div>
      
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe602;</i>
  </button>
</div>
 
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
</div>

3.5.7 按钮容器

尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SLn4uU5Y-1686143517877)(LayUI.assets/image-20210220091006959.png)]

<div class="layui-btn-container">
  <button type="button" class="layui-btn">按钮一</button> 
  <button type="button" class="layui-btn">按钮二</button> 
  <button type="button" class="layui-btn">按钮三</button> 
</div>

3.6 表单

LayUI通过样式设置与特定的js实现了更具有风格样式的表单，但是依赖于相应的表单模块

3.6.1 简单使用

在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yjm2F0Da-1686143517878)(LayUI.assets/image-20210220094149559.png)]

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="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">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </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">
    </div>
  </div>
  <div class="layui-form-item">
    <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>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" 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>
//Demo
layui.use('form', function(){
  var form = layui.form;
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

3.6.2 行区块结构

基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。

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

3.6.3 输入框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UtcL6P2U-1686143517880)(LayUI.assets/image-20210220094351587.png)]

<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类

3.6.4 下拉选择框

3.6.4.1 默认选择框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BqzLBWwm-1686143517881)(LayUI.assets/image-20210220094530902.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9gijm72-1686143517882)(LayUI.assets/image-20210220094655219.png)]

<select name="quiz">
  <option value="">请选择</option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号">你的工号？</option>
    <option value="你最喜欢的老师">你最喜欢的老师？</option>
  </optgroup>
</select>
3.6.4.3 搜索选择框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SXEEueUe-1686143517885)(LayUI.assets/image-20210220094753884.png)]

以及通过设定属性 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>

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

3.6.5 复选框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQvr6VRy-1686143517886)(LayUI.assets/image-20210220094858296.png)]

默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆"> 
<input type="checkbox" name="" title="禁用" disabled> 
 
原始风格：
<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>

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置*value=“1”*可自定义值，否则选中时返回的就是默认的on

3.6.6 开关

其实就是checkbox复选框的“变种”，通过设定 lay-skin=“switch” 形成了开关风格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YEkhwHCe-1686143517888)(LayUI.assets/image-20210220095013155.png)]

<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

3.6.7 单选框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mfwjVLqx-1686143517889)(LayUI.assets/image-20210220095117539.png)]

<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

3.6.8 文本域

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8my6ge2B-1686143517891)(LayUI.assets/image-20210220095205992.png)]

<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

3.6.9 表单方框风格

通过追加 layui-form-pane 的class，来设定表单的方框风格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtLBtvhP-1686143517895)(LayUI.assets/image-20210220095318243.png)]

<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>

3.7 导航

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。

3.7.1 水平导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HpVlshMe-1686143517897)(LayUI.assets/image-20210220095630462.png)]

<ul class="layui-nav" lay-filter="">
  <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>
 
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.7.2 垂直/侧边导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A83l2u75-1686143517900)(LayUI.assets/image-20210220095706408.png)]

<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <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>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.7.3 面包屑导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k3XCk5Dt-1686143517902)(LayUI.assets/image-20210220095826267.png)]

<span class="layui-breadcrumb">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

可以通过设置属性 lay-separator=“-” 来自定义分隔符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SbfjLA7L-1686143517904)(LayUI.assets/image-20210220100206026.png)]

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.8 Tab选项卡

Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。

依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用）

3.8.1 默认Tab选项卡

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JrerId8l-1686143517906)(LayUI.assets/image-20210220100344934.png)]

<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>
 
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.8.2 Tab简洁风格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQtb6Ash-1686143517907)(LayUI.assets/image-20210220100429785.png)]

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <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>
</div>      
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.8.3 Tab卡片风格

通过追加class：layui-tab-card来设定卡片风格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKZR3439-1686143517910)(LayUI.assets/image-20210220101939554.png)]

<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" style="height: 100px;">
    <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 class="layui-tab-item">6</div>
  </div>
</div>
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.8.4 带删除的Tab

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NIwTk9WB-1686143517913)(LayUI.assets/image-20210220111550729.png)]

<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 class="layui-tab-item">6</div>
  </div>
</div>
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.9 进度条

进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素

依赖加载组件：element

3.9.1 常规用法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ug6Qu95Y-1686143517914)(LayUI.assets/image-20210220111844383.png)]

<div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="10%"></div>
</div>
 
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
});
</script>

属性 lay-percent ：代表进度条的初始百分比

3.9.2 显示进度比文本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lpzEEX1D-1686143517916)(LayUI.assets/image-20210220112052378.png)]

<div class="layui-progress" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
</div>
       
<div class="layui-progress" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
</div>
 
<div class="layui-progress layui-progress-big" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
});
</script>

注意：默认情况下不会显示百分比文本，如果你想开启，对属性lay-showPercent设置任意值即可，如：yes。但如果不想显示，千万别设置no或者false，直接剔除该属性即可。

3.9.3 大号进度条

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oOPESjmG-1686143517919)(LayUI.assets/image-20210220112151445.png)]

<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="20%"></div>
</div>
 
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
</div>
 
<div class="layui-progress layui-progress-big" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
</div>
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
});
</script>

默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。

3.10 面板

一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等

依赖加载组件：element

3.10.1 卡片面板

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tz33DKrr-1686143517921)(LayUI.assets/image-20210220112400179.png)]

<div class="layui-card">
  <div class="layui-card-header">卡片面板</div>
  <div class="layui-card-body">
    卡片式面板面板通常用于非白色背景色的主体内<br>
    从而映衬出边框投影
  </div>
</div>

如果你的网页采用的是默认的白色背景，不建议使用卡片面板。

3.10.2 折叠面板

通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJdROJBB-1686143517922)(LayUI.assets/image-20210220112455934.png)]

<div class="layui-collapse">
  <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>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.10.3 手风琴面板

在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gWlVY5QH-1686143517924)(LayUI.assets/image-20210220112558207.png)]

<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>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

3.11 静态表格

通过内置的自定义属性对其进行风格的多样化设定。

3.11.1 常规用法

通过 layui-table 将表格样式修改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZdKaNJZf-1686143517926)(LayUI.assets/image-20210220112754506.png)]

<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>
    </tr>
  </tbody>
</table>

3.11.2 基础属性

属性名属性值备注
lay-even无用于开启 隔行 背景，可与其它属性一起使用
lay-skin=“属性值”line （行边框风格） row （列边框风格） nob （无边框风格）若使用默认风格不设置该属性即可
lay-size=“属性值”sm （小尺寸） lg （大尺寸）若使用默认尺寸不设置该属性即可

将所需要的基础属性写在table标签上即可，如（一个带有隔行背景，且行边框风格的大尺寸表格）：

<table lay-even lay-skin="line" lay-size="lg">
…
</table>

3.11.3 表格尺寸

通过 lay-size=“sm” 或 *lay-size=“lg”*进行尺寸的切换

<table class="layui-table" lay-size="sm">
  小尺寸表格（内部结构参见右侧目录“常规用法”）
</table>
 
<table class="layui-table" lay-size="lg">
  大尺寸表格（内部结构参见右侧目录“常规用法”）
</table>

3.12 徽章

徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6JoGD1Xj-1686143517928)(LayUI.assets/image-20210220113132775.png)]

小圆点，通过 layui-badge-dot 来定义，里面不能加文字
<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span>
 
椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式
<span class="layui-badge">6</span>
<span class="layui-badge">99</span>
<span class="layui-badge">61728</span>
 
<span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">黑</span>
<span class="layui-badge layui-bg-gray">灰</span>
 
边框体，通过 layui-badge-rim 来定义
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span>

3.12.1 与其它元素的搭配

按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PaP5x5IC-1686143517932)(LayUI.assets/image-20210220113234007.png)]

<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>
导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p0tfR2gI-1686143517937)(LayUI.assets/image-20210220113343007.png)]

<ul class="layui-nav" style="text-align: right;"> <-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 -->
  <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
  </li>
</ul>
选项卡

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hpZ9vh7n-1686143517941)(LayUI.assets/image-20210220113420407.png)]

<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理<span class="layui-badge-dot"></span></li>
    <li>最新邮件<span class="layui-badge">99+</span></li>
  </ul>
  <div class="layui-tab-content"></div>
</div>

3.13 时间线

按照指定设置样式书写

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oYHlDPQh-1686143517947)(LayUI.assets/image-20210220113515935.png)]

<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月18日</h3>
      <p>
        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月16日</h3>
      <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
      <ul>
        <li>《登高》</li>
        <li>《茅屋为秋风所破歌》</li>
      </ul>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月15日</h3>
      <p>
        中国人民抗日战争胜利72周年
        <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
        <br>铭记、感恩
        <br>所有为中华民族浴血奋战的英雄将士
        <br>永垂不朽
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">过去</div>
    </div>
  </li>
</ul>

注意：

  • 图标可以任意定义（但并不推荐更改）
  • 标题区域并不意味着一定要加粗
  • 内容区域可自由填充。

四、LayUI内置模块

LayUI提供了很多的内置模块，提供相应的效果与功能，为了减少代码的冗余，默认是不加载所有的模块的，所以需要在使用相应模块时加载对应模块

<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>

4.1 日期选择laydate

年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。

4.1.1 快速使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layDate快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  <input type="text" class="layui-input" id="test1">
</div>
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#test1' //指定元素
  });
});
</script>
</body>
</html>

4.1.2 elem 属性

类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 
  laydate.render({ 
    elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
  });
});
</script>

4.1.3 type 属性

类型：String，默认值：date

用于单独提供不同的选择器类型，可选值如下表：

type可选值名称用途
year年选择器只提供年列表选择
month年月选择器只提供年、月选择
date日期选择器可选择：年、月、日。type默认值，一般可不填
time时间选择器只提供时、分、秒选择
datetime日期时间选择器可选择：年、月、日、时、分、秒
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 
//年选择器
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'
});
    
});
</script>

4.1.4 range 属性

类型：Boolean/String，默认值：false

如果设置 true，将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。

<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
//可以一次加载多个模块
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
 //年范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'year'
  ,range: true //或 range: '~' 来自定义分割字符
});
 
//年月范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'month'
  ,range: true //或 range: '~' 来自定义分割字符
});
 
//日期范围选择
laydate.render({ 
  elem: '#test'
  ,range: true //或 range: '~' 来自定义分割字符
});
 
//时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,range: true //或 range: '~' 来自定义分割字符
});
 
//日期时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,range: true //或 range: '~' 来自定义分割字符
});
});
</script>

4.1.5 format 属性

类型：String，默认值：yyyy-MM-dd

通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：

格式符说明
yyyy年份，至少四位数。如果不足四位，则前面补零
y年份，不限制位数，即不管年份多少位，前面均不补零
MM月份，至少两位数。如果不足两位，则前面补零。
M月份，允许一位数。
dd日期，至少两位数。如果不足两位，则前面补零。
d日期，允许一位数。
HH小时，至少两位数。如果不足两位，则前面补零。
H小时，允许一位数。
mm分钟，至少两位数。如果不足两位，则前面补零。
m分钟，允许一位数。
ss秒数，至少两位数。如果不足两位，则前面补零。
s秒数，允许一位数。

通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示：

格式示例值
yyyy-MM-dd HH:mm:ss2017-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒2017年08月18日 20时08分08秒
yyyyMMdd20170818
dd/MM/yyyy18/08/2017
yyyy年M月2017年8月
M月d日8月18日
北京时间：HH点mm分北京时间：20点08分
yyyy年的M月某天晚上，大概H点2017年的8月某天晚上，大概20点
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 
  //自定义日期格式
laydate.render({ 
  elem: '#test'
  ,format: 'yyyy年MM月dd日' //可任意组合
});
});
</script>

4.1.6 value 属性

类型：String，默认值：new Date()

支持传入符合format参数设定的日期格式字符，或者 new Date()

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 
//传入符合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 的时间戳
});
});
</script>

4.1.7 min/max 属性

类型：string，默认值：min: ‘1900-1-1’、max: ‘2099-12-31’

设定有限范围内的日期或时间值，不在范围内的将不可选中。这两个参数的赋值非常灵活，主要有以下几种情况：

  1. 如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（半角冒号）号分割。这里并非遵循 format 设定的格式
    2.如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后
    3.如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 //日期有效范围只限定在：2017年
laydate.render({ 
  elem: '#test'
  ,min: '2017-1-1'
  ,max: '2017-12-31'
});
 
//日期有效范围限定在：过去一周到未来一周
laydate.render({ 
  elem: '#test'
  ,min: -7 //7天前
  ,max: 7 //7天后
});
 
//日期时间有效范围的设定: 
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,min: '2017-8-11 12:30:00'
  ,max: '2017-8-18 12:30:00'
});
 
//时间有效范围设定在: 上午九点半到下午五点半
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,min: '09:30:00'
  ,max: '17:30:00'
});
});
</script>

4.1.8 showBottom 属性

类型：Boolean，默认值：true

如果设置 false，将不会显示控件的底部栏区域

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
//不显示底部栏
laydate.render({
  elem: '#test'
  ,showBottom: false
});
});
</script>

4.1.9 btns 属性

类型：Array，默认值：[‘clear’, ‘now’, ‘confirm’]

右下角显示的按钮，会按照数组顺序排列，内置可识别的值有：clear、now、confirm

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
//只显示清空和确认
laydate.render({
  elem: '#test'
  ,btns: ['clear', 'confirm']
});
});
</script>

4.1.10 calendar 属性

类型：Boolean，默认值：false

我们内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示。

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 //允许显示公历节日
laydate.render({
  elem: '#test'
  ,calendar: true
});
});
</script>

4.1.11 mark 属性

类型：Object，默认值：无

calendar 参数所代表的公历节日更多情况下是一个摆设。因此，我们还需要自定义标注重要日子，比如结婚纪念日？日程等？它分为以下两种：

标注格式说明
每年的日期{‘0-9-18’: ‘国耻’}0 即代表每一年
每月的日期{‘0-0-15’: ‘中旬’}0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增）
特定的日期{‘2017-8-21’: ‘发布’)-

可同时设定多个，如：

<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
 //标注重要日子
var ins1 = laydate.render({
  elem: '#test'
  ,mark: {
    '0-10-14': '生日'
    ,'0-12-31': '跨年' //每年12月31日
    ,'0-0-10': '工资' //每个月10号
    ,'2017-8-15': '' //具体日期
    ,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
    ,'2017-8-21': '发布'
  }
  ,done: function(value, date){
    if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
      ins1.hint('中国人民抗日战争胜利72周年');
    }
  }
});
});
</script>

4.2 分页laypage

laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染：

快速使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layPage快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div id="test1"></div>
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  //执行一个laypage实例
  laypage.render({
    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
    ,count: 50 //数据总数，从服务端得到
  });
});
</script>
</body>
</html>

4.2.1 基础参数

参数选项说明类型默认值
elem指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: ‘id’ 注意：这里不能加 # 号 2. elem: document.getElementById(‘id’)String/Object-
count数据总数。一般通过服务端得到Number-
limit每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。Number10
limits每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框Array[10, 20, 30, 40, 50]
curr起始页。一般用于刷新类型的跳页以及HASH跳页。Number1
groups连续出现的页码个数Number5
prev自定义“上一页”的内容，支持传入普通文本和HTMLString上一页
next自定义“下一页”的内容，同上String下一页
first自定义“首页”的内容，同上String1
last自定义“尾页”的内容，同上String总页数值
layout自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）Array[‘prev’, ‘page’, ‘next’]
theme自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的CSS类，以便自定义主题String-
hash开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页String/Booleanfalse

4.3 数据表格table

是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能

4.3.1 快速使用

创建一个table实例最简单的方式是，在页面放置一个元素 ，然后通过 table.render() 方法指定该容器，如下所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZnqiuYw0-1686143517951)(LayUI.assets/image-20210220132051285.png)]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
 
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,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}
    ]]
  });
  
});
</script>
</body>
</html>

4.3.2 表格渲染

三种初始化渲染方式

方式机制适用场景
01.方法渲染用JS方法的配置完成渲染（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
02.自动渲染HTML配置，自动渲染无需写过多 JS，可专注于 HTML 表头部分
03.转换静态表格转化一段已有的表格元素无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可
4.3.2.1 方法渲染

其实这是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器：

<table id="demo" lay-filter="test"></table>

<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
 
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
  //,…… //更多参数参考右侧目录：基本参数选项
});
});
</script>

事实上我们更推荐采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了。

备注：*table.render()*方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作

4.3.2.2 自动渲染

即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

  1. 带有 class=“layui-table” 的 标签。
  2. 对标签设置属性 lay-data=“” 用于配置一些基础参数
  3. 在标签中设置属性*lay-data=“”*用于配置表头信息

按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。下面是一个示例：

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth', sort: true}">财富</th>
    </tr>
  </thead>
</table>
4.3.2.3 静态表格渲染

假设你的页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素，比如拖拽调整列宽？比如排序等等？那么你同样可以很轻松地去实现。如下所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2CHmgVBO-1686143517954)(LayUI.assets/image-20210220133200944.png)]

转换后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FDp69cbE-1686143517957)(LayUI.assets/image-20210220133212902.png)]

<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 src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;

 
//转换静态表格
table.init('demo', {
  height: 315 //设置高度
  ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
  //支持所有基础参数
}); 
});
</script>

4.3.3 基础参数

基础参数并非所有都要出现，有必选也有可选，结合你的实际需求自由设定。基础参数一般出现在以下几种场景中：

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

下面是目前 table 模块所支持的全部参数一览表，我们对重点参数进行了的详细说明，你可以点击下述表格最右侧的“示例”去查看

参数类型说明示例值
elemString/DOM指定原始 table 容器的选择器或 DOM，方法渲染方式必填“#demo”
colsArray设置表头。值是一个二维数组。方法渲染方式必填详见表头参数
url（等）-异步数据接口相关参数。其中 url 参数为必填项详见异步接口
toolbarString/DOM/Boolean开启表格头部工具栏区域，该参数支持四种类型值：toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器toolbar: ‘
xxx
’ //直接传入工具栏模板字符toolbar: true //仅开启工具栏，不显示左侧模板toolbar: ‘default’ //让工具栏左侧显示默认的内置模板注意： 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数		false
defaultToolbarArray该参数可自由配置头部工具栏右侧的图标按钮详见头工具栏图标
widthNumber设定容器宽度。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。1000
heightNumber/String设定容器高度详见height
cellMinWidthNumber（layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth100
doneFunction数据渲染完的回调。你可以借此做一些其它的操作详见done回调
dataArray直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。[{}, {}, {}, {}, …]
totalRowBoolean是否开启合计行区域。layui 2.4.0 新增false
pageBoolean/Object开启分页（默认：false） 注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外）{theme: ‘#c00’}
limitNumber每页显示的条数（默认：10）。值务必对应 limits 参数的选项。 注意：优先级低于 page 参数中的 limit 参数30
limitsArray每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。 注意：优先级低于 page 参数中的 limits 参数[30,60,90]
loadingBoolean是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式false
titleString定义 table 的大标题（在文件导出等地方会用到）layui 2.4.0 新增“用户表”
textObject自定义文本，如空数据时的异常提示等。注：layui 2.2.5 开始新增。详见自定义文本
autoSortBoolean默认 true，即直接由 table 组件在前端自动处理排序。 若为 false，则需自主排序，通常由服务端直接返回排序好的数据。 注意：该参数为 layui 2.4.4 新增详见监听排序
initSortObject初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。详见初始排序
idString设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。 值得注意的是：从 layui 2.2.0 开始，该参数也可以自动从 ** 中的 id 参数中获取。test
skin（等）-设定表格各种外观、尺寸等详见表格风格

4.3.4 表头参数

如果你采用的是方法渲染，cols 是一个二维数组，表头参数设定在数组内；如果你采用的自动渲染，表头参数的设定应放在th标签上

参数类型说明示例值
fieldString设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识username
titleString设定标题名称用户名
widthNumber/String设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比 请结合实际情况，对不同列做不同设定。200 30%
minWidthNumber局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth100
typeString设定列类型。可选值有：normal（常规列，无需设定）checkbox（复选框列）radio（单选框列，layui 2.4.0 新增）numbers（序号列）space（空列）任意一个可选值
LAY_CHECKEDBoolean是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。true
fixedString固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。 注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。left（同 true） right
hideBoolean是否初始隐藏列，默认：false。layui 2.4.0 新增true
totalRowBoolean/Object是否开启该列的自动合计功能，默认：false。当开启时，则默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据，格式如下：codelayui.code{ "code": 0, "msg": "", "count": 1000, "data": [{}, {}] "totalRow": { "score": "666" ,"experience": "999" }} 如上，在 totalRow 中返回所需统计的列字段名和值即可。 另外，totalRow 字段同样可以通过 parseData 回调来解析成为 table 组件所规定的数据格式。true
totalRowTextString用于显示自定义的合计文本。layui 2.4.0 新增“合计：”
sortBoolean是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。比如：‘贤心’ > ‘2’ > ‘100’，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。true
unresizeBoolean是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。false
editString单元格编辑类型（默认不开启）目前只支持：text（输入框）text
eventString自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理任意字符
styleString自定义单元格样式。即传入 CSS 样式background-color: #5FB878; color: #fff;
alignString单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）center
colspanNumber单元格所占列数（默认：1）。一般用于多级表头3
rowspanNumber单元格所占行数（默认：1）。一般用于多级表头2
templetString自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等详见自定义模板
toolbarString绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮详见行工具事件
//方法渲染：
table.render({
  cols:  [[ //标题栏
    {checkbox: true}
    ,{field: 'id', title: 'ID', width: 80}
    ,{field: 'username', title: '用户名', width: 120}
  ]]
});
 
它等价于自动渲染：
<table class="layui-table" lay-data="{基础参数}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{checkbox:true}"></th>
      <th lay-data="{field:'id', width:80}">ID</th>
      <th lay-data="{field:'username', width:180}">用户名</th>
    </tr>
  </thead>
</table>

4.3.5 异步数据接口

数据的异步请求由以下几个参数组成：

参数名功能
url接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） page 代表当前页码、limit 代表每页数据量
method接口http请求类型，默认：get
where接口的其它参数。如：where: {token: ‘sasasas’, id: 123}
contentType发送到服务端的内容编码类型。如果你要发送 json 内容，可以设置：contentType: ‘application/json’
headers接口的请求头。如：headers: {token: ‘sasasas’}
parseData数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。table 组件默认规定的数据格式为（参考：/demo/table/user/）
很多时候，您接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：
{
  "status": 0,
  "message": "", 
  "total": 180, 
  "data": {
    "item": [{}, {}]
  }
}
那么你需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式。转换为标准格式
{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [{}, {}]
} 
------------------------------------------------------------------------------

table.render({
  elem: '#demp'
  ,url: ''
  ,parseData: function(res){ //res 即为原始返回的数据
    return {
      "code": res.status, //解析接口状态
      "msg": res.message, //解析提示文本
      "count": res.total, //解析数据长度
      "data": res.data.item //解析数据列表
    };
  }
  //,…… //其他参数
});

4.4 表单form

layui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点，你必须给表单体系所在的父元素加上class=“layui-form”，一切的工作都会在你加载完form模块后，自动完成。

4.4.1 基本使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui.form小例子</title>
<link rel="stylesheet" href="layui.css" media="all">
</head>
<body>
<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value="0">写作</option>
        <option value="1">阅读</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关关</label>
    <div class="layui-input-block">
      <input type="checkbox" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关开</label>
    <div class="layui-input-block">
      <input type="checkbox" checked lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="0" title="男">
      <input type="radio" name="sex" value="1" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">请填写描述</label>
    <div class="layui-input-block">
      <textarea 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="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script src="layui.js"></script>
<script>
layui.use('form', function(){
  var form = layui.form;
  
  //各种基于事件的操作，下面会有进一步介绍
});
</script>
</body>
</html>

4.4.2 更新渲染

有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制，但没有关系，你只需要执行 form.render(type, filter); 方法即可。

第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：

参数（type）值描述
select刷新select选择框渲染
checkbox刷新checkbox复选框（含开关）渲染
radio刷新radio单选框框渲染
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染

第二个参数：filter，为 class=“layui-form” 所在元素的 lay-filter=“” 的值。你可以借助该参数，对表单完成局部更新。

【HTML】
<div class="layui-form" lay-filter="test1">
  …
</div>
 
<div class="layui-form" lay-filter="test2">
  …
</div>
      
【JavaScript】
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
//……

4.4.3 预设元素属性

<input type="text" lay-verify="email">
<input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">
<button lay-submit>提交</button>

上述的lay-verify、lay-skin、lay-filter、lay-submit神马的都是我们所说的预设的元素属性，他们可以使得一些交互操作交由form模块内部、或者你来借助form提供的JS接口精确控制。目前我们可支持的属性如下表所示：

属性名属性值说明
title任意字符设定元素名称，一般用于checkbox、radio框
lay-skinswitch（开关风格） primary（原始风格）定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式
lay-ignore任意字符或不设值是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格
lay-filter任意字符事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。
lay-verifyrequired（必填项） phone（手机号） email（邮箱） url（网址） number（数字） date（日期） identity（身份证） 自定义值同时支持多条规则的验证，格式：lay-verify=“验证A|验证B” 如：lay-verify=“required|phone|number” 另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify=“pass”，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证
lay-verTypetips（吸附层） alert（对话框） msg（默认）用于定义异常提示层模式。
lay-reqText任意字符用于自定义必填项（即设定了 lay-verify=“required” 的表单）的提示文本 注意：该功能为 layui 2.5.0 新增
lay-submit无需填写值绑定触发提交的元素，如button

4.4.4 事件监听

语法：form.on(‘event(过滤器值)’, callback);

form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下：

event描述
select监听select下拉选择事件
checkbox监听checkbox复选框勾选事件
switch监听checkbox复选框开关事件
radio监听radio单选框事件
submit监听表单提交事件

默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。如：

form.on('select(test)', function(data){
  console.log(data);
});
4.4.4.1 监听select选择

下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：

form.on('select(filter)', function(data){
  console.log(data.elem); //得到select原始DOM对象
  console.log(data.value); //得到被选中的值
  console.log(data.othis); //得到美化后的DOM对象
});

注意：如果你想监听所有的select，去掉过滤器*(filter)*即可。

4.4.4.2 监听checkbox复选

复选框点击勾选时触发，回调函数返回一个object参数，携带两个成员：

form.on('checkbox(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //是否被选中，true或者false
  console.log(data.value); //复选框value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});
4.4.4.3 监听switch开关

开关被点击时触发，回调函数返回一个object参数，携带两个成员：

form.on('switch(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //开关是否开启，true或者false
  console.log(data.value); //开关value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});
4.4.4.4 监听radio单选

radio单选框被点击时触发，回调函数返回一个object参数，携带两个成员：

form.on('radio(filter)', function(data){
  console.log(data.elem); //得到radio原始DOM对象
  console.log(data.value); //被点击的radio的value值
});
4.4.4.5 监听submit提交

按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：

form.on('submit(*)', function(data){
  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

**注意：**上述的*submit(*)*中的 * 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如：

<button lay-submit lay-filter="*">提交</button>

你可以把*号换成任意的值，如：*lay-filter=“go”，但监听事件时也要改成 form.on(‘submit(go)’, callback);

4.4.5 表单赋值 / 取值

语法：form.val(‘filter’, object);

用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。

//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
  "username": "贤心" // "name": "value"
  ,"sex": "女"
  ,"auth": 3
  ,"check[write]": true
  ,"open": false
  ,"desc": "我爱layui"
});
 
//获取表单区域所有值
var data1 = form.val("formTest");

第二个参数中的键值是表单元素对应的 name 和 value。

4.4.6 表单验证

只需要在表单元素上加上 lay-verify=“” 属性值即可。如：

<input type="text" lay-verify="email"> 
 
还同时支持多条规则的验证，如下：
<input type="text" lay-verify="required|phone|number">

也可以自定义复杂校验

form.verify({
  username: function(value, item){ //value：表单的值、item：表单的DOM对象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
    
    //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
    if(value === 'xxx'){
      alert('用户名不能为敏感词');
      return true;
    }
  }
  
  //我们既支持上述函数式的方式，也支持下述数组的形式
  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位，且不能出现空格'
  ] 
});

当你自定义了类似上面的验证规则后，你只需要把 key 赋值给输入框的 lay-verify 属性即可：

<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">

4.5 穿梭框transfer

4.5.1 快速使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>穿梭框组件</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
  <div id="test1"></div>
  <script src="../src/layui.js"></script>
  <script>
  layui.use('transfer', function(){
    var transfer = layui.transfer;
   
    //渲染
    transfer.render({
      elem: '#test1'  //绑定元素
      ,data: [
        {"value": "1", "title": "李白", "disabled": "", "checked": ""}
        ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
        ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
      ]
      ,id: 'demo1' //定义索引
    });
  });
  </script>
</body>
</html>

4.5.2 基础参数

参数选项说明类型默认值
elem指向容器选择器String/Object-
title穿梭框上方标题Array[‘标题一’, ‘标题二’]
data数据源Array[{}, {}, …]
parseData用于对数据源进行格式解析Function详见数据源格式解析
value初始选中的数据（右侧列表）Array-
id设定实例唯一索引，用于基础方法传参使用。String-
showSearch是否开启搜索Booleanfalse
width定义左右穿梭框宽度Number200
height定义左右穿梭框高度Number340
text自定义文本，如空数据时的异常提示等。
text: { none: ‘无数据’ //没有数据时的文案 ,searchNone: ‘无匹配数据’ //搜索无匹配数据时的文案} `		Object-
onchange左右数据穿梭时的回调Function详见穿梭时的回调

4.5.3 数据源格式解析

数据格式解析的回调函数，用于将任意数据格式解析成 transfer 组件规定的数据格式，以下是合法的数据格式如下：

合法的数据格式

[
  {"value": "1", "title": "李白", "disabled": "", "checked": ""}
  ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
  ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
]

不符合规范的数据格式

[
  {"id": "1", "name": "李白"}
  ,{"id": "2", "name": "杜甫"}
  ,{"id": "3", "name": "贤心"}
]

需要将其解析成 transfer 组件所规定的数据格式：

transfer.render({
  elem: '#text1'
  ,data: [
    {"id": "1", "name": "李白"}
    ,{"id": "2", "name": "杜甫"}
    ,{"id": "3", "name": "贤心"}
  ]
  ,parseData: function(res){
    return {
      "value": res.id //数据值
      ,"title": res.name //数据标题
      ,"disabled": res.disabled  //是否禁用
      ,"checked": res.checked //是否选中
    }
  }
});

4.5.4 获得右侧数据

穿梭框的右侧数据通常被认为是选中数据，因此你需要得到它并提交到后台

transfer.render({
  elem: '#test'
  ,data: []
  ,id: 'demo1' //定义索引
});
 
//获得右侧数据
var getData = transfer.getData('demo1');

4.6 轮播图carousel

carousel 是 layui 2.0 版本中新增的全新模块，主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何类型内容的轮播式切换操作，更可以胜任 FullPage （全屏上下轮播）的需求，简洁而不失强劲，灵活而优雅。

4.6.1 快速使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oe8746PI-1686143517960)(LayUI.assets/image-20210220143512808.png)]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>carousel模块快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div>条目1</div>
    <div>条目2</div>
    <div>条目3</div>
    <div>条目4</div>
    <div>条目5</div>
  </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
  });
});
</script>
</body>
</html>

在HTML结构中，只需要简单地注意这两项：

  1. 外层元素的 class=“layui-carousel” 用来标识为一个轮播容器
  2. 内层元素的属性 carousel-item 用来标识条目

而 id 则用于carousel模块建造实例的元素指向，剩下的工作，就是按照你的实际需求，给方法设置不同的基础参数了。

4.6.2 基础参数

通过核心方法：carousel.render(options) 来对轮播设置基础参数，也可以通过方法：carousel.set(options) 来设定全局基础参数.

可选项说明类型默认值
elem指向容器选择器，如：elem: ‘#id’。也可以是DOM对象string/object无
width设定轮播容器宽度，支持像素和百分比string‘600px’
height设定轮播容器高度，支持像素和百分比string‘280px’
full是否全屏轮播booleanfalse
anim轮播切换动画方式，可选值为：default（左右切换）updown（上下切换）fade（渐隐渐显切换）string‘default’
autoplay是否自动切换booleantrue
interval自动切换的时间间隔，单位：ms（毫秒），不能低于800number3000
index初始开始的条目索引number0
arrow切换箭头默认显示状态，可选值为：hover（悬停显示）always（始终显示）none（始终不显示）string‘hover’
indicator指示器位置，可选值为：inside（容器内部）outside（容器外部）none（不显示） 注意：如果设定了 anim:‘updown’，该参数将无效string‘inside’
trigger指示器的触发事件string‘click’

4.6.3 切换事件

轮播的每一次切换时触发，回调函数返回一个object参数，携带的成员如下：

var carousel = layui.carousel;
 
//监听轮播切换事件
carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
  console.log(obj.index); //当前条目的索引
  console.log(obj.prevIndex); //上一个条目的索引
  console.log(obj.item); //当前条目的元素对象
});

4.6.4 重置轮播

在执行 carousel.render(options) 方法时，有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法。

var ins = carousel.render(options);
 
//重置轮播
ins.reload(options);

1">

条目1
条目2
条目3
条目4
条目5
```

在HTML结构中，只需要简单地注意这两项：

  1. 外层元素的 class=“layui-carousel” 用来标识为一个轮播容器
  2. 内层元素的属性 carousel-item 用来标识条目

而 id 则用于carousel模块建造实例的元素指向，剩下的工作，就是按照你的实际需求，给方法设置不同的基础参数了。

4.6.2 基础参数

通过核心方法：carousel.render(options) 来对轮播设置基础参数，也可以通过方法：carousel.set(options) 来设定全局基础参数.

可选项说明类型默认值
elem指向容器选择器，如：elem: ‘#id’。也可以是DOM对象string/object无
width设定轮播容器宽度，支持像素和百分比string‘600px’
height设定轮播容器高度，支持像素和百分比string‘280px’
full是否全屏轮播booleanfalse
anim轮播切换动画方式，可选值为：default（左右切换）updown（上下切换）fade（渐隐渐显切换）string‘default’
autoplay是否自动切换booleantrue
interval自动切换的时间间隔，单位：ms（毫秒），不能低于800number3000
index初始开始的条目索引number0
arrow切换箭头默认显示状态，可选值为：hover（悬停显示）always（始终显示）none（始终不显示）string‘hover’
indicator指示器位置，可选值为：inside（容器内部）outside（容器外部）none（不显示） 注意：如果设定了 anim:‘updown’，该参数将无效string‘inside’
trigger指示器的触发事件string‘click’

4.6.3 切换事件

轮播的每一次切换时触发，回调函数返回一个object参数，携带的成员如下：

var carousel = layui.carousel;
 
//监听轮播切换事件
carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
  console.log(obj.index); //当前条目的索引
  console.log(obj.prevIndex); //上一个条目的索引
  console.log(obj.item); //当前条目的元素对象
});

4.6.4 重置轮播

在执行 carousel.render(options) 方法时，有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法。

var ins = carousel.render(options);
 
//重置轮播
ins.reload(options);

618，清华社 IT BOOK 多得图书活动开始啦！活动时间为 2023 年 6 月 7 日至 6 月 18 日，清华
社为您精选多款高分好书，涵盖了 C++、Java、Python、前端、后端、数据库、算法与机器学习等多
个 IT 开发领域，适合不同层次的读者。全场 5 折，扫码领券更有优惠哦！快来京东点击链接 IT BOOK
多得（或扫描京东二维码）查看详情吧！
在这里插入图片描述

teayear
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
layIM PC版开发文档
04-11
LayIM 前端文档.html layui
干货！手把手教你如何使用第三方通讯服务实现LayIM Socket组件开发。
weixin_30876945的博客
01-18 227
前言 　　之前写了一系列的文章,是关于使用ASP.NET SignalR技术实现LayIM的功能对接，有兴趣的同学移步：http://www.cnblogs.com/panzi/p/5767095.html。 　　此篇会从头到尾详细介绍开发流程，和对接方法。文章会比较长，准备点小零食，细细品读吧，如果只能够跟着实践最好。 　　本篇文章主要讲解内容如下： 融云服务WebSDK的对接 L...
vue使用LayIM组件接入第三方通讯平台：融云
哎呦哥哥的博客
07-22 2301
layui-src安装 npm install layui-src 将layui放入你的/static/目录中，并且你的html页面在根目录，那么一个最直接的例子是： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>router-permis...
layuiAdmin通用型后台模板框架
最新发布
weixin_43652507的博客
03-15 554
layuiAdmin 是目前非常流行的后台模板框架，广泛用于各类管理平台。
layim框架+websocket即时通讯功能
dxyzhbb的博客
01-06 1万+
文章目录 一、layim即时通讯的认识 1.1、layim基础配置 1.1.1、初始化（init） 1.1.2、群员接口（members） 1.1.3、layim基础配置代码 二、WebSocket搭建 2.1、创建消息处理类 2.2、webSocket配置类 2.3、前台jsp页面建立websocket连接 四、附上完整jsp代码 1.4、效果图 那么上篇讲到spring集成websocket的...
LayIm结合原生WebSocket实现即时通讯
qq_51042735的博客
06-08 883
layim之刷新群聊列表
踮脚敲代码
03-19 846
前段时间有朋友问我，如何刷新群聊列表，其实跟之前整合刷新好友列表一样，移除掉面板的群聊再重新加载就可以了，下面听我娓娓道来！ 一. 添加右键菜单 绑定入口，添加右键菜单（如图），如果之前没看过整合右键菜单的话，专机带你一程✈layim整合右键菜单 二. 清空数据缓存 刷新群聊列表其实也很简单，但是有些朋友直接移除html代码，做了肉眼看不到以为成功，其实真正不是这样操作，因为移除html代码并不代表删除了保存在本地的缓存数据，导致后期操作遇到冲突。接下来附上移除群组列表的代码： // 获取所有群聊 var
layim即时通讯实例各功能整合
踮脚敲代码
11-03 2577
LayIM打造属于你自己的网页聊天系统 官网地址：layim官网 以下整合了几个常用功能，只为方便大家共享： 1、查找好友查找群聊 2、查看更多聊天记录 3、整合右键菜单 4、刷新好友列表 5、移动好友分组 6、绑定未读消息数量 7、修改群组头像 8、邀请好友加入群组 9、整合WebSocket即时通讯 10、另外分享一下 Spring整合WebSocket通讯 11、Socket发送长消息（如图片16进制），有时会自动断开服务器连接，请查看 调整缓冲区大小 ...
layui前端框架（EasyWeb后台开发框架）
12-28
layui开发框架，包含各种layui插件及使用
layui前端框架-其他
06-11
</p><p> </p><p>layui前端框架更新日志：</p><p>v2.6.8</p><p>[重写] sort 方法，以便对数字、非数字及混合类等所有内容的排序进行支持</p><p>[新增] dropdown 组件的 align 参数，用于控制下拉菜单水平对齐方式...
layui前段框架日期控件使用方法详解
12-29
本文实例为大家分享了layui-日期控件的实现代码，供大家参考，具体内容如下 ... <blockquote class=layui-elem-quote>目前Layui中的日期组件还是layDate 1.1的改良版，它后续将会进行一次重写。 <fieldset class=
layui/layim
12-04
LayIM基于layui模块体系，涵盖好友分组，聊天，群聊天，消息通知，私聊，表情图片等功能：，下载layui的 layim.js，放在项目中/layui/lay/modules目录下可以直接使用
LayUI框架示例整合
06-21
自己写的前端LayUI框架示例整合，适合小白学习（大神勿喷。谢谢）
layui框架与SSM前后台交互的方法
10-16
今天小编就为大家分享一篇layui框架与SSM前后台交互的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layim之初始化配置
踮脚敲代码
08-02 834
上面的参数中，brief、skin、min、isgroup、chatLog、copyright等参数都是非必填项，本身具有默认值。而对于init（初始化接口）、members（查看群员接口）、uploadImage（上传图片接口）、uploadFile（上传文件接口）所返回的数据格式，下回再一一道来…通过上述方式，便可成功加载layim。当然，你仅仅只是看到了一个"客服姐姐"的聊天面板（如下图）!LayIM通过config方法初始化配置layim.config(options)模块加载名称layim。...
layim之查看更多聊天记录
踮脚敲代码
05-18 6624
layim查看聊天记录，layui官网已经已经写得很详细，在这里只是粗略说说聊天记录页面。 先呈上效果图压压惊 附上源码，点击下载 1.绑定聊天记录 /** html代码 */ <textarea title="消息模版" id="LAY_tpl" style="display:none;"> <!--if(item.fromid == parent.layui.layim.cache().mine.id){--> {{# layui.each(d.data, functi
layui框架的一些基本使用
qq_52986363的博客
01-12 8133
layui的优缺点以及使用layui前的准备 1.栅格系统 2.按钮 3.表单 4.表格 5.面板 6.时间线 7.选项卡 8.弹出层 9.数据表格
在vue-element-admin 中引用layui的layim即时通讯模块 打包之后放到测试服，会报这个错误，求大神
weixin_43355305的博客
09-03 683
Layim 聊天功能
热门推荐
℡メ㏑╭ァ小凯
08-22 1万+
效果图       引用 &lt;link rel="stylesheet" href="static/layim/dist/css/layui.css"&gt;     &lt;script type="text/javascript src="static/layim/dist/layui.all.js"&gt;&lt;/script&gt;     &lt;s
layui框架技术框架图
03-30
layui框架技术框架图主要包括以下几个部分： 1. 核心模块：包括layui.js和layui.css，是整个框架的基础，提供了一些基础的样式和功能。 2. UI模块：包括各种UI组件，如按钮、表单、表格等，提供了丰富的UI组件，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

teayear

读后有收获可以支付宝请作者喝咖

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值