【前端】layui前端框架学习笔记

骑鱼过海的猫1232024-04-01 11:41

【前端目录贴】
参考视频:LayUI
参考笔记:https://blog.csdn.net/qq_61313896/category_12432291.html

1.介绍

官网：http://layui.apixx.net/index.html

国人16年开发的框架,拿来即用,门槛低

...

2. LayUi的安装及使用

Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来，常用来当做后台管理系统的框架

2.1 LayUi的特点

  1. 原生态开发
  2. 轻量级模块化
  3. 外简内丰
  4. 开箱即用

2.2 安装和使用

官网下载,本地引入核心css和核心js

测试html如下

html 复制代码 
<!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-v2.6.8/layui/css/layui.css">
    <script src="./layui-v2.6.8/layui/layui.js"></script>
</head>
<body>
<!-- 你的 HTML 代码 -->
<script>
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;

        layer.msg('Hello World');
    });
</script>
</body>
</html>

3. 页面元素

3.1 布局

3.1.1 布局容器

3.1.1.1 固定宽度
html 复制代码 
 <!--固定宽度(两侧有留白效果)-->
<div  class="layui-container" style="background-color:navajowhite;height: 300px">
    固定宽度
</div>
3.1.1.2 完整宽度
html 复制代码 
<!--完整宽度(占据屏幕的100%)-->
<div class="layui-fluid" style="background-color:yellow;height: 300px">
   完整宽度
</div>

3.1.2 栅格系统

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

3.1.2.1 栅格布局规则：
3.1.2.2 响应式规则

栅格会根据屏幕的分辨率选择对应的样式效果

3.1.2.3 列间距

通过"列间距"的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：

xml 复制代码 
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30
layui-col-space32
<p>即：支持列之间为 1px-32px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔</p>
·如果需要的间距高于30px（一般不常见），请采用偏移，下文继续讲解·
3.1.2.4 列偏移

对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。

3.1.2.5 列嵌套

理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。下面是一个简单的例子

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!--引入核心css文件-->
    <link rel="stylesheet"  href="./layui/css/layui.css">

</head>
<body>
<!--布局容器-->
<div class="layui-container">
<!--
    栅格系统
    1.定义行.layui-row
    2.定义列 .layui-col-md*
        md:表示不同屏幕的表示（xs,sm,md,lg)
        * 表示列的数量
    3.每一行被均分为12列，列的总数不能超过12，否则会自动换行
    4.响应式规则，栅格会根据屏幕的分辨率选择对应的样式效果
    5.列边距 . layui-col-space*
        * 表示px值（1-30）
    6.列偏移 . layui-col-md-offset*
            * 代表的是右偏移占据的列数
    7.列嵌套
        列中可以无限嵌套列


-->
    <!--定义行-->
    <div class="layui-row" >
        <!--定义列-->
        <div class="layui-col-md5" style="background-color: yellow">
            内容5/12
        </div>
        <div class="layui-col-md7" style="background-color: #00f7de">
            内容7/12
        </div>
    </div>
    <!--定义行-->
    <div class="layui-row" >
        <!--定义列-->
        <div class="layui-col-md4" style="background-color:rebeccapurple">
            内容4/12
        </div>
        <div class="layui-col-md4" style="background-color: red">
            内容4/12
        </div>
        <div class="layui-col-md5" style="background-color: blue">
            内容5/12
        </div>
    </div>

    <hr/>
<!--    响应式规则-->
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="grid-demo grid-demo-bg1">xs:6/12 | sm:6/12 | md:4/12</div>
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="grid-demo layui-bg-red">xs:6/12 | sm:6/12 | md:4/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
            <div class="grid-demo layui-bg-blue">xs:4/12 | sm:12/12 | md:4/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
            <div class="grid-demo layui-bg-green">xs:4/12 | sm:7/12 | md:8/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
            <div class="grid-demo layui-bg-black">xs:4/12 | sm:5/12 | md:4/12</div>
        </div>
    </div>

    <hr>
    <h3>列间距</h3>
    <div class="layui-row layui-col-space30">
        <div class="layui-col-md4" >
            <div style="background-color: blue">1/3</div>
        </div>
        <div class="layui-col-md4" >
            <div style="background-color: blue">1/3</div>
        </div>
        <div class="layui-col-md4" >
            <div style="background-color: purple">1/3</div>
        </div>
    </div>

    <h3>列偏移</h3>
    <div class="layui-row">
        <div class="layui-col-md4" >
            <div style="background-color: blue">4/12</div>
        </div>
        <div class="layui-col-md4 layui-col-md-offset3" >
            <div style="background-color: red">4/12</div>
        </div>
    </div>

    <hr>
    <h3>列嵌套</h3>
    <div class="layui-row">
        <div class="layui-col-md6" style="background-color: red">
            <div class="layui-row" >
                <!--定义列-->
                <div class="layui-col-md4" style="background-color:rebeccapurple">
                    内容4/12
                </div>
                <div class="layui-col-md4" style="background-color: red">
                    内容4/12
                </div>
                <div class="layui-col-md4" style="background-color: blue">
                    内容5/12
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

3.2 基本元素

3.2.1 按钮

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

3.2.1.1 主题
名称 组合
原始 class="layui-btn layui-btn-primary"
默认 class="layui-btn"
百搭 class="layui-btn layui-btn-normal"
暖色 class="layui-btn layui-btn-warm"
警告 class="layui-btn layui-btn-danger"
禁用 class="layui-btn layui-btn-disabled"
3.2.1.2 尺寸
尺寸 组合
大型 class="layui-btn layui-btn-lg"
默认 class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"
3.2.1.3 圆角
主题 组合
原始 class="layui-btn layui-btn-radius layui-btn-primary"
默认 class="layui-btn layui-btn-radius"
百搭 class="layui-btn layui-btn-radius layui-btn-normal"
暖色 class="layui-btn layui-btn-radius layui-btn-warm"
警告 class="layui-btn layui-btn-radius layui-btn-danger"
禁用 class="layui-btn layui-btn-radius layui-btn-disabled"
3.2.1.4 图标

温馨提示：各种图标字体请移步(**官网**)文档左侧【页面元素 - 图标】阅览

js 复制代码 
<button type="button" class="layui-btn">
  <i class="layui-icon layui-icon-down layui-font-12"></i> 按钮
</button>
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!--引入核心css文件-->
    <link rel="stylesheet" href="./layui/css/layui.css">

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

<hr/>
<!-- 不同主题按钮-->
<div>
    <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
    <button type="button" class="layui-btn">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
    <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
    <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
    <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>

<hr/>
<!-- 不同尺寸按钮-->
<div>
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
        <button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
    </div>
</div>

<hr/>
<!--    圆角-->
<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
    <button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
    <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
    <button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
</div>
<hr/>
<!--图标-->
<!--从 layui 2.3.0 开始，支持 font-class 的形式定义图标：-->
<i class="layui-icon layui-icon-face-smile"></i>
<!--注意：在 layui 2.3.0 之前的版本，只能设置 unicode 来定义图标-->
<i class="layui-icon">&#xe60c;</i>

<button type="button" class="layui-btn">
    <i class="layui-icon layui-icon-face-smile"></i>按钮
</button>
</body>
</html>

3.2.2 导航

导航一般指页面引导性频道集合,多以菜单的形式呈现,可用于头部和侧边,面包屑结构简单,支持自定义分隔符
依赖加载模块: element

  • 实现步骤
  1. 引入资源
js 复制代码 
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
  1. 依赖加载模块
js 复制代码 
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //...
});
</script>
3.2.2.1 水平导航

水平导航: layui-nav

当前被选中项: layui-this

二级菜单: layui-nav-child

3.2.2.2 垂直/侧边导航

垂直导航: layui-nav layui-nav-tree

侧边导航: layui-nav layui-nav-tree layui-nav-side

3.2.2.3 导航主题

颜色:layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）

徽章:

3.2.2.4 面包屑

面包屑导航: layui-breadcrumb

自定义分隔符: lay-separator="-"

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!--引入核心css文件-->
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="layui/layui.js"></script>

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

        //...
    });
</script>
<!--<hr/>-->
<!--<h3>水平导航</h3>-->
<!--<ul class="layui-nav">-->
<!--    <li class="layui-nav-item"><a href="">最新活动</a></li>-->
<!--    <li class="layui-nav-item layui-this"><a href="">产品</a></li>-->
<!--    <li class="layui-nav-item"><a href="">大数据</a></li>-->
<!--    <li class="layui-nav-item">-->
<!--        <a href="javascript:;">解决方案</a>-->
<!--        <dl class="layui-nav-child"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!--            <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>-->

<!--<hr/>-->
<!--<h3>垂直导航</h3>-->
<!--<ul class="layui-nav  layui-nav-tree">-->
<!--    <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"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!--            <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>-->
<!--<h3>侧边导航</h3>-->
<!--<ul class="layui-nav  layui-nav-tree layui-nav-side">-->
<!--    <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"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!--            <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>-->

<!--<h3>主题:颜色,徽章</h3>-->
<!--<ul class="layui-nav  layui-nav-tree layui-nav-side layui-bg-red">-->
<!--    <li class="layui-nav-item"><a href="">最新活动</a></li>-->
<!--    <li class="layui-nav-item layui-this"><a href="">产品<span class="layui-badge">6</span></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"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!--            <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>-->

<!--lay-separator 自定义分隔符-->
<h3>面包屑导航</h3>
<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</ul>
</span>
</body>
</html>

3.2.3 选项卡

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。

依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）

  • 实现步骤
  1. 引入资源
js 复制代码 
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
  1. 依赖加载模块
js 复制代码 
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //...
});
</script>
3.2.3.1 默认Tab选项卡

默认Tab选项卡: layui-tab

选项卡内容: layui-tab-content

3.2.3.2 Tab简洁风格

Tab简洁风格: layui-tab layui-tab-brief

3.2.3.3 Tab卡片风格

Tab卡片风格: layui-tab layui-tab-card

3.2.3.4 带删除的Tab

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

3.2.4 表格

3.2.4.1 静态表格

layui-table

3.2.4.2 基础属性
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!--引入核心css文件-->
    <link rel="stylesheet" href="./layui/css/layui.css">

</head>
<body>
<!--基本样例-->
<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>

<!--基础属性-->
<table class="layui-table" lay-even lay-skin="line" lay-size="sm">
<!--<table class="layui-table" lay-even lay-skin="row">-->
<!--<table class="layui-table" lay-even lay-skin="nob">-->
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>昵称</th>
        <th>加入时间</th>
        <th>签名</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>贤心</td>
        <td>2016-11-29</td>
        <td>人生就像是一场修行</td>
    </tr>
    <tr>
        <td>许闲心</td>
        <td>2016-11-28</td>
        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里...</td>
    </tr>
    <tr>
        <td>贤心</td>
        <td>2016-11-29</td>
        <td>人生就像是一场修行</td>
    </tr>
    <tr>
        <td>许闲心</td>
        <td>2016-11-28</td>
        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里...</td>
    </tr>
    <tr>
        <td>贤心</td>
        <td>2016-11-29</td>
        <td>人生就像是一场修行</td>
    </tr>
    <tr>
        <td>许闲心</td>
        <td>2016-11-28</td>
        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里...</td>
    </tr>
    </tbody>
</table>
</body>
</html>

3.2.5 表单

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

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

3.2.5.1 基本结构
html 复制代码 
<div class="layui-form-item">
  <label class="layui-form-label">标签区域</label>
  <div class="layui-input-block">
    原始表单元素区域
  </div>
</div>

常用属性

required：注册浏览器所规定的必填字段

lay-verify：注册form模块需要验证的类型

layui-input-block 占据整行宽度

layui-input-inline 不会占据部分宽度

3.2.5.2 文本框
html 复制代码 
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

autocomplete是否自动填充（当浏览器缓存中存在相同的name属性时，会填充）
placeholder 为空时,默认显示的文本信息
class="layui-input"：layui.css提供的通用CSS类

3.2.5.3 下拉选择框

optgroup 标签给select分组

通过selected属性设置默认选中项
disabled禁用该选择:可可以设置select和option标签(禁用下拉框和禁用下拉选项)
lay-search 来开启搜索匹配功能

html 复制代码 
 <!--下拉选择框-->
    <!--第一项主要是占个坑，让form模块预留"请选择"的提示空间，否则将会把第一项（存在value值）作为默认选中项。你可以在option的空值项中自定义文本，如：请选择分类。-->
    <div class="layui-form-item">
        <label class="layui-form-label">我是下拉选择框</label>
        <div class="layui-input-inline">
            <!--通过selected属性设置默认选中项-->
            <!--disabled禁用该选择:可以针对所有选择,也可以针对单个item-->
            <!--<select name="city" lay-verify="required" disabled>-->
            <select name="city" lay-verify="required">
                <option value="">请选择一个城市</option>
                <option value="010" selected>北京</option>
                <option value="021">上海</option>
                <option value="0571" disabled>杭州</option>
            </select>

            <select name="quiz" lay-verify="required">
                <option value="">请选择</option>
                <optgroup label="城市记忆">
                    <option value="你工作的第一个城市" selected>你工作的第一个城市？</option>
                </optgroup>
                <optgroup label="学生时代">
                    <option value="你的工号">你的工号？</option>
                    <option value="你最喜欢的老师">你最喜欢的老师？</option>
                </optgroup>
            </select>
            <select name="city" lay-search>
                <option value="">请选择一个城市</option>
                <option value="010">你好啊北京,hello</option>
                <option value="021" selected>上海</option>
                <option value="0571" disabled>杭州</option>
            </select>
        </div>
    </div>
3.2.5.3 复选框

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）

属性checked可设定默认选中

属性lay-skin可设置复选框的风格

设置value="1"可自定义值，否则选中时返回的就是默认的on+

html 复制代码 
  <div class="layui-form-item">
        <label class="layui-form-label">标签区域22</label>
        <div class="layui-input-block">
            <!--默认风格：-->
            <input type="checkbox" name="hobby" title="写作" checked>
            <input type="checkbox" name="hobby" title="发呆">
            <input type="checkbox" name="hobby" title="禁用" disabled>
            <!--原始风格：-->
            <hr/>
            <input type="checkbox" name="hobby" title="写作" lay-skin="primary" checked>
            <input type="checkbox" name="hobby" title="发呆" lay-skin="primary">
            <input type="checkbox" name="hobby" title="禁用" lay-skin="primary" disabled>
        </div>
    </div>
3.2.5.5 开关

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

属性checked可设定默认开

属性disabled开启禁用

属性lay-text可自定义开关两种状态的文本

设置value="1"可自定义值，否则选中时返回的就是默认的on

html 复制代码 
<!--开关-->
    <div class="layui-form-item">
        <label class="layui-form-label">标签区域22</label>
        <div class="layui-input-block">
            <!--默认风格：-->
            <input type="checkbox" name="xxx" lay-skin="switch" lay-text="开/关闭">
            <input type="checkbox" name="yyy" lay-skin="switch" checked disabled>
            <input type="checkbox" name="zzz" lay-skin="switch" value="1">
        </div>
    </div>
3.2.5.6 单选框

属性title可自定义文本

属性disabled开启禁用

设置value="xxx"可自定义值，否则选中时返回的就是默认的on

html 复制代码 
<!--单选框-->
    <div class="layui-form-item">
        <label class="layui-form-label">标签区域22</label>
        <div class="layui-input-block">
            <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>
        </div>
    </div>
3.2.5.7 文本域

class="layui-textarea"：layui.css提供的通用CSS类

html 复制代码 
 <!--文本域-->
    <div class="layui-form-item">
        <label class="layui-form-label">标签区域22</label>
        <div class="layui-input-block">
            <textarea name="aaa" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
        </div>
    </div>
3.2.5.8 组装行内表单

class="layui-inline"：定义外层行内

class="layui-input-inline"：定义内层行内

html 复制代码 
<!--组装行内表单-->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">范围</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="password" name="" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
3.2.5.9 忽略美化渲染

对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格

html 复制代码 
 <!--忽略美化渲染-->
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block"  >
            <select name="city" lay-search lay-ignore>
                <option value="">请选择一个城市</option>
                <option value="010">你好啊北京,hello</option>
                <option value="021" selected>上海</option>
                <option value="0571" disabled>杭州</option>
            </select>
        </div>
    </div>
3.2.5.10 表单方框风格

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

html 复制代码 
<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.3 组件示例

3.3.1 弹层组

3.3.1.1 作为独立组件使用(未下载到独立版本)

引入jQuery1.8以上的任意版本，

引入layer.js

引入layer.css

html 复制代码 
<script>
layer.msg('hello'); 
</script>
3.3.1.2 layui 模块化使用

引入layui.css

引入layui.js

html 复制代码 
layui.use('form', function () {
        var layer = layui.layer;
        layer.msg('hello');
    });
3.3.1.3 内置方法

layer.open
layer.msg

3.3.1.4 type-基本层类型

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：
0（信息框，默认）
1（页面层）
2（iframe层）
3（加载层）
4（tips层）

若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

3.3.1.5 title-标题

类型：String/Array/Boolean，默认：'信息'

title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
总结:
title :'我是标题'
title: ['文本', 'font-size:18px;']
title: false

3.3.1.6 content-内容

类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同

js 复制代码 
/!*
 如果是页面层
 */
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});
/!*
 如果是iframe层
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open执行tips层
 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});
3.3.1.7 area - 宽高

类型：String/Array，默认：'auto'

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']

3.3.1.8 icon - 图标

信息框和加载层的私有参数

类型：Number，默认：-1（信息框）/0（加载层）

信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2

3.3.2 日期与时间选择

3.3.2.1 作为独立组件使用(未下载到独立版本)
3.3.2.2 在 layui 模块中使用
js 复制代码 
 layui.use('form', function () {
        var laydate = layui.laydate;

    });
3.3.1.4 基础参数选项

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

js 复制代码 
 laydate.render({
            elem: '#test1' //指定元素
});
3.3.1.5 elem - 绑定元素

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

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

js 复制代码 
laydate.render({ 
  elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});
3.3.1.6 type - 控件选择类型

类型：String，默认值：date

用于单独提供不同的选择器类型

type可选值 名称 用途
year 年选择器 只提供年列表选
month 年月选择器 只提供年、月选择
date 日期选择器 可选择：年、月、日。type默认值，一般可不填
time 时间选择器 只提供时、分、秒选择
datetime 日期时间选择器 可选择：年、月、日、时、分、秒
js 复制代码 
//日期范围选择
laydate.render({ 
  elem: '#test'
  ,range: true //或 range: '~' 来自定义分割字符
});
 
//日期时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,range: true
});
 
//时间范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,range: true
});
 
//年范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'year'
  ,range: true
});
 
//年月范围选择
laydate.render({ 
  elem: '#test'
  ,type: 'month'
  ,range: true
});
3.3.1.7 format - 自定义格式

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

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

格式符 说明
yyyy 年份，至少四位数。如果不足四位，则前面补零
y 年份，不限制位数，即不管年份多少位，前面均不补零
MM 月份，至少两位数。如果不足两位，则前面补零。
M 月份，允许一位数。
dd 日期，至少两位数。如果不足两位，则前面补零。
d 日期，允许一位数。
HH 小时，至少两位数。如果不足两位，则前面补零。
H 小时，允许一位数。
mm 分钟，至少两位数。如果不足两位，则前面补零。
m 秒数，至少两位数。如果不足两位，则前面补零。
s 秒数，允许一位数。
js 复制代码 
laydate.render({
            elem: '#test6'
            , format: 'yyyy年MM月dd日' //可任意组合
});
3.3.1.8 value - 初始值

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

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

js 复制代码 
//传入符合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 的时间戳
});

3.3.3 分页

模块加载名称：laypage

3.3.3.1 基础参数选项

通过核心方法：laypage.render(options) 来设置基础参数。由于使用非常简单，本篇直接罗列核心接口的参数选项

js 复制代码 
<div id="test1"></div>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('form', function () {
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: 60 //数据总数，从服务端得到
            , limit: 5 //dize大小   默认一页10条

            , limits: [10, 20, 30, 40, 50] //每页条数的选择项,和layout中的limit搭配使用
            // ,layout:['prev', 'page', 'next','limit']
            , layout: ['prev', 'page', 'next', 'limit', 'count']//自定义排版
            , groups: 6,

            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    console.log('首次不执行执行')
                }
            }

        });

    });
</script>
3.3.3.2 jump - 切换分页的回调

当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）

js 复制代码 
laypage.render({
  elem: 'test1'
  ,count: 70 //数据总数，从服务端得到
  ,jump: function(obj, first){
    //obj包含了当前分页的所有参数，比如：
    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    console.log(obj.limit); //得到每页显示的条数
    
    //首次不执行
    if(!first){
      //do something
    }
  }
});

3.3.4 数据表格

模块加载名称：table

3.3.4.1 快速使用
js 复制代码 
<table id="demo" lay-filter="test"></table>
<script>
    layui.use('form', function () {
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            , height: 312
            , url: 'singers.json' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'singer_name', title: '歌手名称', width: 150}
                , {field: 'singer_pic', title: '歌手图片', width: 80, sort: true}
                , {field: 'other_name', title: '别称', width: 80}
                , {field: 'singer_id', title: '歌手id', width: 177,sort: true}
            ]]
        });

    });
</script>

js数据格式

json 复制代码 
{
  "code": 0,
  "msg": "",
  "count": 50,
  "data": [{
    "singer_name": "周杰伦",
    "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.webp",
    "other_name": "Jay Chou",
    "singer_id": 4558,
    "id": 1
  },
    {
      "singer_name": "林俊杰",
      "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R150x150M000001BLpXF2DyJe2.webp",
      "other_name": "JJ Lin",
      "singer_id": 4286,
      "id": 2
    }
  ]
}
3.3.4.2 三种初始化渲染方式

默认方式是方法渲染

3.3.4.3 方法渲染
html 复制代码 
<table id="demo2"></table>
js 复制代码 
 // 方法渲染
        table.render({
            elem: '#demo2'
            , height: 312
            , url: 'singers.json' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'singer_name', title: '歌手名称', width: 150}
                , {field: 'singer_pic', title: '歌手图片', width: 80, sort: true}
                , {field: 'other_name', title: '别称', width: 80}
                , {field: 'singer_id', title: '歌手id', width: 177,sort: true}
            ]]
        });
3.3.4.4 自动渲染

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

  1. 带有 class="layui-table" 的 <table> 标签。
  2. 对标签设置属性 lay-data="" 用于配置一些基础参数
  3. 在 <th> 标签中设置属性lay-data=""用于配置表头信息
html 复制代码 
<table id="demo3" class="layui-table" lay-data="{height:315, url:'singers.json' ,page:true}">
    <thead>
    <tr>
        <th lay-data="{field:'id', width:80, sort: true}">ID</th>
        <th lay-data="{field:'singer_name', width:80, sort: true}">歌手名称</th>
        <th lay-data="{field:'singer_pic', width:80, sort: true}">歌手图片</th>
        <th lay-data="{field:'other_name', width:80, sort: true}">别称</th>
        <th lay-data="{field:'singer_id', width:80, sort: true}">歌手id</th>
    </tr>
    </thead>
</table>
3.3.4.5 转换静态表格

页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素

html 复制代码 
<table lay-filter="demo4">
    <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>
js 复制代码 
//转换静态表格
        table.init('demo4', {
            height: 315 //设置高度
            ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
            //支持所有基础参数
});
3.3.4.6 基础参数使用的场景

基础参数使用场景

js 复制代码 
场景一：下述方法中的键值即为基础参数项
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); //重载表格

参考:http://layui.apixx.net/doc/modules/table.html#option

3.3.4.7 开启分页

page: true //开启分页

3.3.4.8 开启头部工具栏&行工具栏
js 复制代码 
<!--表格工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addAll">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteAll">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="updateAll">编辑</button>
    </div>
</script>
<!--表头工具栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-even="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-even="delete">删除</a>
</script>

绑定表格工具栏：toolbar:'#toolbarDemo'

绑定表头工具栏： {toolbar: '#barDemo'}

3.3.4.9 事件监听
  • 头工具事件
js 复制代码 
//test 为容器的lay-filter=""属性值
table.on('toolbar(test)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id);
  switch(obj.event){
    case 'add':
      layer.msg('添加');
    break;
    case 'delete':
      layer.msg('删除');
    break;
    case 'update':
      layer.msg('编辑');
    break;
  };
});
  • 行工具事件
js 复制代码 
table.on('tool(test)', function (obj) {
            console.log(1)
            // var checkStatus = table.checkStatus(obj.config.id);
            //获取当前事件名
            var tr = obj.data;//当前行数据
            var event = obj.event;
            console.log(event)
            switch (obj.event) {
                case 'delete':
                    layer.confirm('确认要删除吗?', function (index) {
                        //删除指定tr
                        obj.del();删除对应行（tr）的DOM结构，并更新缓存
                        console.log('删除了')
                        //关闭弹出层,(index是当前弹出层的下标)
                        layer.close(index);
                        //...//向服务端发送删除指令
                    });
                    break;
                case 'edit':
                    layer.prompt({
                        //表单元素的类型 0=文本框, 1=密码框, 2=文本域
                        formType: 0,
                        value: tr.singer_name //设置输入框的值
                    }, function (value, index) {
                        //修改指定单元格的值
                        //value表示修改后输入的值
                        obj.update({
                            singer_name:value
                        })
                        layer.close(index);
                    });
                    break;
            }
        });
3.3.4.10 开启单元格编辑

单元格编辑类型（默认不开启）目前只支持：text（输入框）
{field: 'singer_name', title: '歌手名称', width: 150,edit:'text'}

  • 监听单元格编辑事件
js 复制代码 
//监听单元格编辑事件
        table.on('edit(test)', function (obj) {
            console.log(obj)
            //修改后得值
            var value=obj.value;
            //得到当前修改的tr对象
            var data=obj.data;
            //得到修改后的字段
            var field  = obj.field;
            layer.alert('id:'+data.id+'的'+field+'字段值修改为:'+value);

        });
3.3.4.11 数据表格的重载

3.3.5 LayUIMini

基于Layui编写的一套最简洁、易用的后台框架模板
官网地址:http://layuimini.99php.cn/

3.3.5.1 LayUIMini使用

...

相关推荐
卸任10 分钟前
Electron霸屏功能总结
前端·react.js·electron
fengci.10 分钟前
ctfshow黑盒测试前半部分
前端
忆琳18 分钟前
Vue3 全局自动大写转换：一个配置，全站生效
javascript·element
喵个咪22 分钟前
Headless 架构优势：内容与展示解耦，一套 API 打通全端生态
前端·后端·cms
小江的记录本25 分钟前
【JEECG Boot】 JEECG Boot——数据字典管理 系统性知识体系全解析
java·前端·spring boot·后端·spring·spring cloud·mybatis
喵个咪28 分钟前
传统 CMS 太笨重？试试 Headless 架构的 GoWind，轻量又强大
前端·后端·cms
chenjingming66630 分钟前
jmeter导入浏览器上按F12抓的数据包
前端·chrome·jmeter
张元清30 分钟前
不用 Server Components 也能做 React 流式 SSR —— 实战指南
前端·javascript·面试
前端技术32 分钟前
ArkTS第三章：声明式UI开发实战
java·前端·人工智能·python·华为·鸿蒙
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）07Oh My Codex 快速使用指南08UV安装并设置国内源09Claude Code 未登录 使用第三方模型10【Vulhub】Fastjson 1.2.24_rce复现