LayUI前框框架普及版

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/

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

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
多得（或扫描京东二维码）查看详情吧！
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/26682.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

阿里云nginx配置https踩坑(配置完后访问显示无法访问此网站)

阿里云nginx配置https踩坑(配置完后访问显示无法访问此网站)

本人小前端一枚&#xff0c;最近在玩服务器部署自己的东西时踩了个坑&#xff01;&#xff01;&#xff01; server {listen 443 ssl;server_name localhost;ssl_certificate 证书.com.pem;ssl_certificate_key 证书.com.key;#后台管理静态资源存放location / { #文件目…
阅读更多...
springboot+vue新闻稿件java在线投稿管理系统

springboot+vue新闻稿件java在线投稿管理系统

本文介绍了新闻稿件管理系统的开发全过程。通过分析新闻稿件管理系统管理的不足&#xff0c;创建了一个计算机管理新闻稿件管理系统的方案。文章介绍了新闻稿件管理系统的系统分析部分&#xff0c;包括可行性分析等&#xff0c;系统设计部分主要介绍了系统功能设计和数据库设计…
阅读更多...
微信小程序开发实战 ②②（全局数据共享）

微信小程序开发实战 ②②（全局数据共享）

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; 微信小程序 &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f4…
阅读更多...
基于flask的web应用开发——访问漂亮的html页面以及页面跳转

基于flask的web应用开发——访问漂亮的html页面以及页面跳转

目录 0. 前言1. html基本知识2. 编写html文本3. 在Flask中设置访问html4. 实现点击跳转 0. 前言 本节学习如何在flask应用程序下让用户访问你提前制作好的html页面 操作系统&#xff1a;Windows10 专业版 开发环境&#xff1a;Pycahrm Comunity 2022.3 Python解释器版本&am…
阅读更多...
Arcgis进阶篇（6）——如何将Arcgis Pro的离线数据发布成服务

Arcgis进阶篇（6）——如何将Arcgis Pro的离线数据发布成服务

常常因为Arcgis Server&#xff08;或者GeoScene Server&#xff09;昂贵的价格&#xff0c;而导致小项目技术选型选择开源的GIS Server&#xff08;如GeoServer等&#xff09;。但用完之后&#xff0c;发现后者实在拉跨&#xff0c;使用对比差异巨大。那就只能另想办法&#x…
阅读更多...
基于轻量级YOLOv5n/s/m三款模型开发构建基于无人机视角的高空红外目标检测识别分析系统，对比测试分析性能

基于轻量级YOLOv5n/s/m三款模型开发构建基于无人机视角的高空红外目标检测识别分析系统，对比测试分析性能

有关于无人机目标检测和红外场景下的目标检测的项目在我之前的文章中都有实践经历了&#xff0c;但是将无人机和红外场景结合的目标检测项目还是很少的&#xff0c;本文的核心想法就是基于高空无人机场景开发构建目标检测系统。 前面相关博文如下&#xff0c;感兴趣的话可以自…
阅读更多...
Ubuntu本地快速搭建web小游戏网站，公网用户远程访问【内网穿透】

Ubuntu本地快速搭建web小游戏网站，公网用户远程访问【内网穿透】

文章目录 前言1. 本地环境服务搭建2. 局域网测试访问3. 内网穿透3.1 ubuntu本地安装cpolar内网穿透3.2 创建隧道3.3 测试公网访问 4. 配置固定二级子域名4.1 保留一个二级子域名4.2 配置二级子域名4.3 测试访问公网固定二级子域名 转载自cpolar极点云的文章&#xff1a;在Ubunt…
阅读更多...
BGP状态机

BGP状态机

BGP协议基本概念 BGP是一种外部网管协议（EGP），与OSPF、RIP等内部网管协议（IGP）不同，其着眼点不在于自动发现网络拓扑，而在于AS之间选择最佳路由和控制路由的传播。 自治系统AS（ Autonomous System） 由同一个技术管理机构管理、使用统一选路策略的一些路由器的集合。 …
阅读更多...
CDN如何进行内容缓存与内容预热

CDN如何进行内容缓存与内容预热

CDN的启用与管理 1、打开火伞云融合CDN系统控制后台-CDN管理 2、查看加速域名下的全部CDN服务&#xff0c;可以看到有部分厂商暂时处于未启用状态&#xff0c;这是因为这些厂商要求进行域名所有权校验后方可使用&#xff08;如果已经处于已启用状态的厂商则不用额外进行操作&…
阅读更多...
Redis数据类型之String——字符串、数值、bitmap

Redis数据类型之String——字符串、数值、bitmap

Redis数据类型之String——字符串、数值、bitmap 注意索引位置一般从左到右 0开始&#xff0c;叫正向索引。从右到左-1开始叫反向索引 字符串 字符串有很多操作set、get、append、setrange、getrange等&#xff0c;每个都有自己对应的用处 SET SET key value 设置指定 key …
阅读更多...
UniFi USW-Flex 室内-室外 POE 交换机

UniFi USW-Flex 室内-室外 POE 交换机

选择理由 选择理由是是因为要户外使用&#xff0c;对比下户外可以使用的 POE 交换机并不是很多。 UniFi USW-Flex 室内-室外 5 端口 PoE 千兆交换机能够支持在户外和户内使用。 户外使用需要具有基本的防水性能&#xff0c;尤其是冬天比较寒冷的时候也需要具备一定的环境耐受…
阅读更多...
【数据结构】——树的相关习题

【数据结构】——树的相关习题

目录 一、选择填空判断题题1题2题3题4题5题6题7题8题9 二、应用题题10&#xff08;遍历序列&#xff09;题11&#xff08;存储结构&#xff09;题12 13&#xff08;二叉树/树、森林之间的转换&#xff09;题14&#xff08;线索二叉树&#xff09; 一、选择填空判断题 题1 1、设…
阅读更多...
JVM那些事 (含经典面试题)

JVM那些事 (含经典面试题)

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 前言: 1. JVM&#xff1a;Java 虚拟机&#x…
阅读更多...
由于找不到iutils.dll而造成的错误，要怎么去解决？

由于找不到iutils.dll而造成的错误，要怎么去解决？

在使用电脑或运行某些软件时&#xff0c;有时会遇到“找不到iutils.dll”的错误提示。这个错误通常表示缺少iutils.dll文件或者该文件已经损坏。如果你遇到了这个问题&#xff0c;不要担心&#xff0c;因为有很多方法可以解决这个问题。下面我们一起来看看找不到iutils.dll的问…
阅读更多...
API电商 ERP 数据管理

API电商 ERP 数据管理

没有 API&#xff0c;应用之间的通信将会被扼杀&#xff1b;软件开发者将不断重写并执行相同功能的软件&#xff1b;创新的脚步将会放缓。 API 随处可见。大到一个软件系统&#xff0c;小到几行程序&#xff0c;只要具备了一定的特征&#xff0c;都可以被称作 API。那么&#…
阅读更多...
【网络】基础知识1

【网络】基础知识1

目录 网络发展 独立模式 网络互联 局域网LAN 广域网WAN 什么是协议 初识网络协议 协议分层 OSI七层模型 TCP/IP四层&#xff08;或五层&#xff09;模型 OSI和TCP/IP对比 网络传输流程 什么是报头 局域网通信原理 同网段的主机通讯 跨网段的主机通讯 数据包封装…
阅读更多...
数据治理8大核心模块建设

数据治理8大核心模块建设

数据治理是一个去中心化、多元参与的系统工程。一个全面且明确的数据治理体系&#xff0c;可以帮助组织构建生态式、协同化治理路径&#xff0c;最大化地提升整体数据质量&#xff0c;实现数据战略&#xff0c;激活新型生产力。 本文以元数据、主数据、数据标准、数据质量、数…
阅读更多...
jenkins主从节点安装及pipeline构建

jenkins主从节点安装及pipeline构建

一、背景 通过Jenkins主节点配置的pipeline下发给从节点执行&#xff0c;从而兼容容器化执行 二、安装主节点 docker-compose.yml jenkins:user: rootrestart: alwaysimage: jenkinsci/blueoceancontainer_name: jenkins# network_mode: hostports:- "8081:8080"-…
阅读更多...
【算法与数据结构】209.长度最小的子数组

【算法与数据结构】209.长度最小的子数组

文章目录 题目一、暴力穷解法二、滑动窗口法完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 题目 一、暴力穷解法 思路分析&#xff1a;这道题涉及到数组求和&#xff0c;那么我们很容易想到利用两个for循环来写&#xff0c;…
阅读更多...
移动端浏览器性能优化探索

移动端浏览器性能优化探索

目录 前言 如何衡量卡顿 FPS 与卡顿的关系 新的衡量指标 浏览器动画渲染 GPU扮演的角色 合理避免回流和重绘 浏览器工作流程 解决方案 在移动端的页面开发过程中&#xff0c;我们经常提及页面性能优化、消除页面卡顿的话题&#xff0c;如何确定优化策略&#xff0c;我…
阅读更多...
最新文章

Copyright @ 2022~2023