LayUI

已于 2023-03-12 11:37:52 修改
阅读量2.4k 收藏 7
点赞数
分类专栏： Web UI框架 文章标签： layui html javascript
于 2021-08-25 15:35:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhang_0202/article/details/119912636
版权

LayUI

1、LaUI的安装及使用

1.1、LayUI的介绍

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。

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

官网

官方文档

1.2、LayUI的特点

  • layui属于轻量级框架,简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。
  • layui是提供给后端开发入员的UI框架，基于DOM驱动。

1.3、下载与使用

  1. 在官网首页下载到layui的最新版。目录结构如下：

  2. 获得layui后，将其完整地部署（拷贝到项目中）到你的项目目录中，你只需引入这两个文件

    <!--LayUI的核心css文件-->
<link rel="stylesheet" href="../static/layui/css/layui.css">
<!--LayUI的核心js文件（采用模块化引入）-->
<script src="../static/layui/layui.js"></script>

  3. 基本模板

    <!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>LayUI基本模板</title>
        <!--LayUI的核心css文件-->
        <link href="/static/layui/css/layui.css">
        <!--LayUI的核心js文件（采用模块化引入）-->
        <script src="/static/layui/layui.js" type="text/javascript"></script>
    </head>
    <body>
        <script src="./layui/layui.js"></script>
        <script>
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer
                , form = layui.form;

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

  4. 预先加载模块：还需要声明需要使用的模块和回调函数。layui 通过 use 方法加载模块。当你的 JS 需要用到 layui 模块的时候，且避免到处写 layui.use() 的麻烦。你应该在最外层如此定义

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

    layui.use(['form', 'upload'], function(){  //如果只加载一个模块，可以不填数组。如：layui.use('form')
        var form = layui.form //获取form模块
        ,upload = layui.upload; //获取upload模块

        //监听提交按钮
        form.on('submit(test)', function(data){
            console.log(data);
        });

        //实例化一个上传控件
        upload({
            url: '上传接口url'
            ,success: function(data){
                console.log(data);
            }
        })
    });
</script>

2、页面元素

2.1、布局

2.2.1、布局容器
2.2.1.1、固定宽度（两侧留白）
<div class="layui-container layui-bg-orange" style="height: 300px">
	...
</div>
2.2.1.2、完整宽度（占据屏幕宽度100%）
<div class="layui-fluid layui-bg-red" style="height: 300px">
    ...
</div>
2.1.2、栅格系统

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

2.1.2.1、栅格布局规则
  1. 采用 layui-row 来定义行，如：
  2. 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：*
  3. *列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
    • 变量md 代表的是不同屏幕下的标记（可选值见下文）
    • 变量*** 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
    • 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
  4. 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
  5. 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

实例：

<div class="layui-container">
    <!--定义行-->
    <div class="layui-row">
        <!--定义列-->
        <div class="layui-col-md6 layui-col-sm6 layui-bg-red">6/12</div>
        <div class="layui-col-md6 layui-col-sm6 layui-bg-orange">6/12</div>
    </div>

    <!--定义行-->
    <div class="layui-row">
        <!--定义列-->
        <div class="layui-col-md10 layui-bg-green">10/12</div>
        <div class="layui-col-md2 layui-bg-blue">2/12</div>
    </div>
</div>
2.1.2.2、响应式规则

栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理

<h2>平板、桌面端的不同表现</h2>
<div class="layui-row">
    <div class="layui-col-sm3 layui-col-md6 layui-bg-red">(平板≥768px)：3/12 | (桌面≥992px)：6/12</div>
</div>
<div class="layui-row">
    <div class="layui-col-sm6 layui-col-md10 layui-bg-orange">(平板≥768px)：6/12 | (桌面≥992px)：10/12</div>
</div>
<div class="layui-row">
    <div class="layui-col-sm4 layui-col-md3 layui-bg-blue">(平板≥768px)：4/12 | (桌面≥992px)：3/12</div>
</div>
2.1.2.3、列间距

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

/*支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔*/
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-space：设置后不起作用主要是因为设置的是padding，也就是说是向内缩，所以设置背景色padding也是会添上颜色，看起来好像没有间距一样。可以在里面在加一个div，来达到目的。

如果需要的间距高于30px（一般不常见），请采用列偏移

2.1.2.4、列偏移

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

<div class="layui-row">
    <div class="layui-col-md3">
        <div class="layui-bg-red">3/12</div>
    </div>
    <div class="layui-col-md3 layui-col-md-offset6">
        <div class="layui-bg-orange">向右移动6列，从而在最右侧</div>
    </div>
</div>

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

2.1.2.5、列嵌套

可以对栅格进行无穷层次的嵌套，在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。

<div class="layui-row">
    <div class="layui-col-md6 layui-border-red">
        <div class="layui-row">
            <!--内部列-->
            <div class="layui-col-md4 layui-border-orange">4/12</div>
            <div class="layui-col-md4 layui-border-orange">4/12</div>
            <div class="layui-col-md4 layui-border-orange">4/12</div>
        </div>
    </div>
</div>

2.2、基本元素

2.2.1、按钮
2.2.1.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>
<div class="layui-btn">div按钮</div>
2.2.1.2、主题
名称组合
原始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”

实例：

<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
2.2.1.3、尺寸
尺寸组合
大型class=“layui-btn layui-btn-lg”
默认class=“layui-btn”
小型class=“layui-btn layui-btn-sm”
迷你class=“layui-btn layui-btn-xs”
<button class="layui-btn layui-btn-normal layui-btn-xs">超小型</button>
<button class="layui-btn layui-btn-warm layui-btn-sm">小型</button>
<button class="layui-btn layui-btn-danger layui-btn-normal">默认</button>
<button class="layui-btn layui-btn-disabled layui-btn-lg">大型</button>
2.2.1.4、圆角

layui-btn-radius

<button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-xs">原始超小型圆角按钮</button>
<button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">百搭小型圆角按钮</button>
<button class="layui-btn layui-btn-radius layui-btn-warm">暖色正常圆角按钮</button>
<button class="layui-btn layui-btn-radius layui-btn-danger layui-btn-lg">警告超大型圆角按钮</button>
2.2.1.5、图标
<button type="button" class="layui-btn layui-btn-primary">
    <i class="layui-icon layui-icon-logout layui-font-16"></i> 退出/注销
</button>
<button type="button" class="layui-btn layui-btn-normal">
    <i class="layui-icon layui-icon-home layui-font-16"></i> 主页
</button>
2.2.1.6、按钮组

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

<div class="layui-btn-group">
    <button class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-font-16">&#xe642;</i> 编辑
    </button>
    <button class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-font-16">&#xe641;</i> 分享
    </button>
    <button class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-font-16">&#xe640;</i> 删除
    </button>
</div>
2.2.2、导航

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

依赖加载模块：element

实现步骤：

  1. 引入资源

    <!--LayUI的核心css文件-->
<link rel="stylesheet" href="../static/layui/css/layui.css">
<!--LayUI的核心js文件（采用模块化引入）-->
<script src="../static/layui/layui.js"></script>

  2. 依赖加载模块

    <script type="text/javascript">
    //导航 依赖于element模块
    layui.use('element', function () {
        var element = layui.element;
    });
</script>

  3. 显示指定类型的导航

    1. 水平导航

      <div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <h2 class="layui-font-20">水平导航</h2>
            <ul class="layui-nav">
                <li class="layui-nav-item"><a href="#">最新活动</a></li>
                <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>
                    <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>
        </div>
    </div>
</div>

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

      水平导航：layui-nav

      垂直导航需要追加class：layui-nav layui-nav-tree

      侧边导航需要追加class：layui-nav layui-nav-tree layui-nav-side

    2. 导航主题

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

      <!--如定义一个墨绿背景色的导航-->
<ul class="layui-nav layui-bg-green" lay-filter="">
    …
</ul>

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

    3. 面包屑

      <span class="layui-breadcrumb">
    <a href="">首页</a>
    <a href="">国际新闻</a>
    <a href="">亚太地区</a>
    <a><cite>正文</cite></a>
</span>

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

      <p>
    <span class="layui-breadcrumb" lay-separator="||">
        <a href="">娱乐</a>
        <a href="">八卦</a>
        <a href="">体育</a>
        <a href="">搞笑</a>
        <a href="">视频</a>
        <a href="">游戏</a>
        <a href="">综艺</a>
    </span>
</p>
2.2.3、选项卡

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

依赖加载模块：element

实现步骤

实现步骤：

  1. 引入资源

    <!--LayUI的核心css文件-->
<link rel="stylesheet" href="../static/layui/css/layui.css">
<!--LayUI的核心js文件（采用模块化引入）-->
<script src="../static/layui/layui.js"></script>

  2. 依赖加载模块

    <script type="text/javascript">
    //导航 依赖于element模块
    layui.use('element', function () {
    var element = layui.element;
});
</script>

  3. 显示指定类型的选项卡

    <div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>

    默认风格：layui-tab

    简洁风格需要追加：layui-tab-brief

    卡片风格需要追加：layui-tab-card

带删除的选项卡

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

<div class="layui-tab" lay-allowClose="true">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>
2.2.4、表格
2.2.4.1、常规用法
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <table class="layui-table" lay-even lay-size="lg">
                <colgroup>
                    <col width="60">
                    <col width="100">
                    <col width="360">
                    <col width="110">
                    <col width="150">
                </colgroup>
                <thead>
                    <tr>
                        <td>id</td>
                        <td>电脑名称</td>
                        <td>简介</td>
                        <td>价格</td>
                        <td>录入时间</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>10001</td>
                        <td>华为</td>
                        <td>HUAWEI MateBook X Pro 2021款 i7 16GB 512GB</td>
                        <td>9999.00</td>
                        <td>2021 8/23</td>
                    </tr>
                    <tr>
                        <td>10002</td>
                        <td>小米</td>
                        <td>RedmiBook Air 13.3英寸 2.5k全面屏超轻薄</td>
                        <td>4799.00</td>
                        <td>2021 8/12</td>
                    </tr>
                    <tr>
                        <td>10003</td>
                        <td>联想</td>
                        <td>2021款十一代酷睿i7 14英寸高性能轻薄商务学生超薄本设计超极本办公游戏手提笔记本电脑</td>
                        <td>6899.00</td>
                        <td>2021 5/15</td>
                    </tr>
            </table>
        </div>
    </div>
</div>
2.2.4.2、基础属性

2.2.5、表单

依赖加载模块：form

  1. 给表单体系所在的父元素加上class=“layui-form”
  2. 基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。
<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label for="uName" class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" placeholder="请输入用户名"
                   id="uName" autocomplete="off" autofocus>
        </div>
    </div>
</form>
2.2.5.1、输入框
<input type="text" name="username" class="layui-input" required lay-verify="required|number"
       placeholder="请输入用户名"
       id="uName" autocomplete="off" autofocus>

<div class="layui-input-block">
    <button class="layui-btn" lay-submit>提交</button>
    <input type="reset" class="layui-btn layui-btn-primary">
</div>
  • required：浏览器规定的必填项
  • lay-verify=“required|number”：注册form模块需要验证的类型
  • class=“layui-input”：layui.css提供的通用CSS类

注：提交按钮必须要包含lay-submit，否则可能导致验证不生效问题

2.2.5.2、下拉框
<select name="city" lay-verify="required">
    <option value="">请选择城市</option>
    <option value="010">北京</option>
    <option value="021" disabled>上海（禁用）</option>
    <option value="0571" selected>杭州（默认选中）</option>
</select>
  • 通过selected设置默认选中项
  • 通过disabled开启禁用 可设置select标签 和 option标签（禁用下拉框、禁用下拉中的项）

可以通过optgroup标签给select分组

<select name="history">
    <option>请选择</option>
    <optgroup label="少年时代">
        <option>最喜欢的运动?</option>
    </optgroup>
    <optgroup label="青年时代">
        <option>最喜欢的音乐?</option>
        <option>最热爱的生活?</option>
    </optgroup>
</select>

通过设置lay-search属性可以开启搜索功能

<select name="life" lay-search>
    <option>请选择</option>
    <option>吃饭</option>
    <option>睡觉</option>
    <option>打豆豆</option>
</select>
2.2.5.3、复选框
<h2>默认风格</h2>
<input type="checkbox" name="hobby" title="唱歌" value="sing" disabled>
<input type="checkbox" name="hobby" title="阅读" value="read" checked>
<input type="checkbox" name="hobby" title="打篮球" value="playBasketball">
<h2>原始风格</h2>
<input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" value="sing" disabled/>
<input type="checkbox" name="hobby" title="运动" lay-skin="primary" value="sport"/>
<input type="checkbox" name="hobby" title="写作" lay-skin="primary" value="write" checked/>
  • 通过title属性设置自定义文本（如果不需要文本，则不设置title属性）
  • 通过checked设置可设置默认选中
  • 通过属性lay-skin属性设置复选框的样式效果（primary表示原始风格）
  • 通过disabled禁用元素
  • 设置value="read"可自定义值，否则选中时返回的值默认是：on
2.2.5.4、开关

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

<input type="checkbox" name="start" lay-skin="switch">
<input type="checkbox" name="open" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="turn" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="close" lay-skin="switch" disabled>
  • 属性checked可设定默认打开状态
  • 属性disabled开启禁用
  • 属性lay-text可自定义开关两种状态的文本
  • 设置*value=“open”*可自定义值，否则选中时返回的值默认是：on
2.2.5.5、单选框
<input type="radio" name="gender" value="man" title="男">
<input type="radio" name="gender" value="woman" title="女" checked>
<input type="radio" name="gender" value="" title="中性" disabled>
  • 属性title可自定义文本
  • 属性checked设置默认选中项
  • 属性disabled开启禁用
  • 设置value="xxx"可自定义值，否则选中时返回的值默认是：on
2.2.5.6、文本域
<textarea name="introduce" required lay-verify="required" placeholder="请输入你的个人简介"
          class="layui-textarea"></textarea>

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

2.2.5.7、组装行内表单
<div class="layui-inline">
    <label class="layui-form-label">范围</label>
    <div class="layui-input-inline">
        <input type="text" name="price_min" placeholder="￥" autocomplete=""
               class="layui-input">
    </div>
    <!--横线-->
    <div class="layui-form-mid">-</div>
    <div class="layui-input-inline">
        <input type="text" name="price_max" placeholder="￥" autocomplete=""
               class="layui-input">
    </div>
</div>

class=“layui-inline”：定义外层行内
class=“layui-input-inline”：定义内层行内

2.2.5.8、忽略美化渲染

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

<input type="radio" title="男" name="sex" lay-ignore="">
2.2.5.9、表单方框风格

追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变

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

3、组件示例

3.1、弹出层

依赖加载模块：layer，独立版本：内置模块

3.1.1、使用场景

由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

场景用前准备调用方式
1. 作为独立组件使用如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。通过script标签引入layer.js后，直接用即可。 参考：快速上手
2. layui 模块化使用如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js通过*layui.use(‘layer’, callback)*加载模块

  1. 作为独立组件使用 layer

    <script src="../static/layui/layui.js"></script>
<link rel="stylesheet" href="../static/layui/css/layui.css">
    <script type="text/javascript">
        //使用layer
        layer.msg("hello");
</script>

  2. 在layui中使用layui

    //加载模块
layui.use('layer', function () {
    var layer = layui.layer;

    //使用layer
    layer.msg("hi");
})
3.1.2、基础参数

  1. type 基本层类型

    类型：Number，默认：0

    layer提供了5种层类型。可传入的值有：

    0（信息框，默认）

    1（页面层）

    2（iframe层）

    3（加载层）

    4（tips层）

  2. title 标题

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

    title支持三种类型的值，

    若你传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式；

    如果你不想显示标题栏，你可以title: false

  3. content 内容

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

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

    /*信息框*/
layer.open({
    type: 0,
    //title: '系统信息',
    //title: false,       //不显示标题
    title: ['温馨提示', 'color:green'],
    content: '显示绿色的标题'    //这里content传入的是文本
});

/*页面层*/
layer.open({
    type: 1,
    title: '显示红色div块',
    content: '<div style="width: 200px;height: 200px;background-color: red"></div>'    //这里content传入的是html
});

/*iframe层*/
layer.open({
    type: 2,
    title: '加载url地址，显示对应页面',
    //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content:
    content: ['https:www.tmall.com'],
    area: ['1000px', '800px'],      //设置宽和高
});

/*tip层*/
layer.open({
    type: 4,
    content: ['ASUS华硕游戏本电脑笔记本i5顽石i7飞行堡垒7代8代吃鸡天选R7联想', '#detail']  //数组第二项即吸附元素选择器或者DOM
});

  4. icon 图标

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

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

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

layer.alert('酷毙了', {icon: 1});
layer.msg('不开心', {icon: 5})
layer.load(2);      //风格2的加载

示例：

layer.alert('nice to meet you!', {icon: 6});

layer.msg('你愿意和我做朋友吗', {
    time: 0,        //自动关闭所需毫秒数
    anim: 3,        //设置弹出动画
    shade: [0.8, 'pink'],
    btn: ['当然愿意', '残忍拒绝'],    //按钮
    yes: function (index) {     //关闭当前弹出框
        layer.close(index);
        layer.msg('新朋友，你好', {
            icon: 6,
            btn: ['开心', '快乐'],
        })
    }
})

layer.msg('这是常用的弹出层');

layer.msg('玩命加载中', function () {
    layer.msg('欢迎回来', {icon: 5});
})

3.2、日期和时间选择

模块加载名称：laydate，独立版本：内置模块

layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心

3.2.1、快速使用

和 layer 一样，你可以在 layui 中使用 layDate，也可直接使用 layDate 独立版，请按照你的实际需求来选择。

场景用前准备调用方式
1. 在 layui 模块中使用下载 layui 后，引入layui.css和layui.js即可通过*layui.use(‘laydate’, callback)*加载模块后，再调用方法
2. 作为独立组件使用去 layDate 独立版本官网下载组件包，引入 laydate.js 即可直接调用方法使用

在 layui 模块中使用

<div class="layui-form-item">
    <label class="layui-form-label">出生日期</label>
    <div class="layui-input-inline">
        <input type="text" class="layui-input" id="myDate" placeholder="选择日期">
    </div>
</div>

<script>
    layui.use('laydate', function () {
        //加载laydate模块
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#myDate',        //绑定id为myDate元素
        })
    })
</script>
3.2.2、基础参数

  1. elem 绑定元素

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

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

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

  2. type 控件选择类型

    类型：String，默认值：date

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

    //日期时间选择器
laydate.render({ 
    elem: '#test'
    ,type: 'datetime'
});

  3. 自定义格式

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

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

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

    laydate.render({
    elem: '#myDate5',        //绑定id为myDate5元素
    type: 'datetime',
    format: 'yyyy-MM-dd HH:mm:ss',      //可任意组合
});

  4. value 初始值

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

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

    laydate.render({
    elem: '#myDate5',        //绑定id为myDate5元素
    type: 'datetime',
    format: 'yyyy-MM-dd HH:mm:ss',      //可任意组合
    value: '2020-5-16 12:20:30',        //必须遵循format参数设定的格式
});

//传入Date对象赋初值
laydate.render({
    elem: '#myDate6',
    value: new Date(),
})

3.3、分页

模块加载名称：laypage

3.3.1、快速使用

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

<div id="page"></div>

<script>
    layui.use('laypage', function () {
        //加载laypage模块
        var laypage = layui.laypage;

        //加载laypage实例
        laypage.render({
            elem: 'page',       //elem属性绑定的是容器的ID属性值，不需要加 #号
            count: 100,      //数据总数，从服务端获得
            limit: 10,      //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。（这里计算出一共有：100/10 = 10页）
            limits: [5, 10, 15, 20],        //每页条数选择的选择项
            layout: ['prev', 'page', 'next', 'limit', 'count'],      //自定义排版
            groups: 10,     //连续显示的页码个数
            theme: '#80d4de',
        })
    })
</script>
3.3.2、基础参数

通过核心方法：laypage.render(options) 来设置基础参数

参数选项说明类型默认值
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跳页。如：</>code//开启location.hash的记录laypage.render({ elem: 'test1' ,count: 500 ,curr: location.hash.replace('#!fenye=', '') //获取起始页 ,hash: 'fenye' //自定义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
3.3.3、jump 切换分页的回调

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

laypage.render({
    elem: 'page',       //绑定元素
    count: 50,      //总页数
    limit: 5,       //每页显示的条数
    limits: ['5', '10', '15', '20'],        //每页条数的选择项
    layout: ['prev', 'page', 'next', 'limit', 'count'],     //自定义排版
    jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        console.log(obj.curr);      //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit);     //得到每页显示的条数

        //首次不执行
        if (!first) {
            //do something
        }
    }
})

3.4、数据表格

模块加载名称：table

3.4.1、快速使用

创建一个table实例最简单的方式是，在页面放置一个元素

，然后通过 table.render() 方法指定该容器 

<!--准备容器，设置id属性值-->
<table id="table"></table>

<script>

    //加载table模块
    layui.use('table', function () {
        var table = layui.table;

        //执行table实例
        table.render({
            elem: '#table',     //绑定容器id    属性值
            url: '../static/js/user.json',       //数据接口
            page: true,     //开启分页
            cols: [[        //设置表头
                {field: 'aa', type: 'numbers'},     //设置序列号（数字）
                {field: 'bb', type: 'checkbox'},     //设置序列号（复选框）
                {field: "id", title: '用户编号', sort: true, width: 120, hide: true},       //隐藏该列
                {field: "username", title: '用户名', width: 100,},
                {field: "sex", title: '性别', width: 100,},
                {field: "city", title: '城市',}
            ]],
        });
    })
</script>
3.4.2、三种初始化渲染方式
机制适用场景
方法渲染用JS方法的配置完成渲染（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
自动渲染HTML配置，自动渲染无需写过多 JS，可专注于 HTML 表头部分
转换静态表格转化一段已有的表格元素无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可
3.4.3、方法渲染

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

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

渲染表格

//执行渲染
table.render({
    elem: '#test',     //指定原始表格元素选择器（推荐id选择器）
    url: "../static/js/user.json",        //数据接口
    height: 500,     //容器高度
    page: true,         //开启分页
    cols: [[        //设置表头
        {field: 'id', title: 'ID', sort: true, width: 120},
        {field: 'username', title: '用户名', width: 100},
        {field: 'sex', title: '性别', width: 100},
    ]],
});

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

3.4.4、自动渲染

在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法

\1) 带有 class=“layui-table” 的

标签。
\2) 对标签设置属性 lay-data=“” 用于配置一些基础参数
\3) 在
标签中设置属性*lay-data=“”*用于配置表头信息

<table class="layui-table" lay-data="{url:'../static/js/user.json',page:true}">
    <thead>
        <th lay-data="{field:'id'}">ID</th>
        <th lay-data="{field:'username'}">用户名</th>
        <th lay-data="{field:'sex',sort:true}">性别</th>
    </thead>
</table>
3.4.5、转换静态表格

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

<table lay-filter="demo">
    <thead>
        <tr>
            <th lay-data="{field:'username', width:100}">昵称</th>
            <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
            <th lay-data="{field:'sign'}">签名</th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>贤心1</td>
            <td>66</td>
            <td>人生就像是一场修行a</td>
        </tr>
        <tr>
            <td>贤心2</td>
            <td>88</td>
            <td>人生就像是一场修行b</td>
        </tr>
        <tr>
            <td>贤心3</td>
            <td>33</td>
            <td>人生就像是一场修行c</td>
        </tr>
    </tbody>
</table>

执行用于转换表格的JS方法

var table = layui.table;

//转换静态表格
table.init('demo', {
    height: 315 //设置高度
    //支持所有基础参数
});
3.4.6、基础参数使用场景

基础参数并非所有都要出现，有必选也有可选，结合你的实际需求自由设定

参考api

3.4.7、开启头部工具栏及监听事件
<!--准备容器，设置id属性值-->
<table id="table" lay-filter="test"></table>

<!--表格工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!--lay-event给元素绑定事件-->
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">获取是否全选</button>
    </div>
</script>

<!--表头工具栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe61f;</i>添加</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

<script>

    //加载table模块
    layui.use('table', function () {
        var table = layui.table;

        //执行table实例
        table.render({
            elem: '#table',     //绑定容器id    属性值
            url: '../static/js/user.json',       //数据接口
            page: true,     //开启分页
            cols: [[        //设置表头
                {field: 'aa', type: 'numbers'},     //设置序列号（数字）
                {field: 'bb', type: 'checkbox'},     //设置序列号（复选框）
                {field: "id", title: '用户编号', sort: true, width: 120, hide: true},       //隐藏该列
                {field: "username", title: '用户名', width: 100, unresize: true,},     //设置是否可以拖拽
                {field: "sex", title: '性别', width: 100,},
                {field: "city", title: '城市',},
                //设置表头工具栏
                {title: "操作", toolbar: "#barDemo"}
            ]],
            //设置表格工具栏
            toolbar: '#toolbarDemo',
        });

        /**
         * 监听头工具栏事件
         * 语法：
         *  table.on('toolbar(demo)',function(obj){
         *
         *  });
         *  注：demo表示的是容器上设置的lay-filter属性值
        */
        table.on('toolbar(test)', function (obj) {
            //console.log(obj);       //obj.config可以获取id属性值，即表示当前容器的id属性值，也就是：table
            //获取当前表格被选中的记录对象，返回数据
            var checkStatus = table.checkStatus(obj.config.id);
            //console.log(checkStatus);
            //获取事件名
            var eventName = obj.event;
            //判断事件名，执行对应的代码
            switch (eventName) {
                case 'getCheckData':
                    //获取被选中的记录的数组
                    var arr = checkStatus.data;
                    //将数组解析成字符串
                    layer.alert(JSON.stringify(arr));
                    break;
                case 'getCheckLength':
                    //获取被选中的记录的数组
                    var arr = checkStatus.data;
                    layer.msg('选中了' + arr.length + '条数据!');
                    break;
                case 'isAll':
                    //通过isAll属性判断是否全选
                    var flag = checkStatus.isAll;
                    var str = flag ? '全选' : '未全选';
                    layer.msg(str);
                    break;
            }
        });

        //监听行工具栏事件
        table.on('tool(test)', function (obj) {
            //得到当前操作行的相关信息
            var tr = obj.data;
            console.log(tr);
            //得到事件名
            var eventName = obj.event;
            //判断事件名，执行对应方法
            if (eventName == 'add') {   //添加操作
                layer.msg('add')
            } else if (eventName == 'edit') {   //修改操作
                //输入框
                layer.prompt({
                    //表单元素的类型   0：文本框  1：密码框  2:文本域
                    formType: 0,
                    value: tr.username,     //设置输入框的值
                }, function (value, index) {
                    //修改指定单元格的值
                    //value表示修改的值，也就是输入的值
                    obj.update({
                        username: value,
                    })
                    //关闭弹出层
                    layer.close(index);
                });
            } else if (eventName == 'del') {    //删除操作
                //确认框
                layer.confirm('你确认要删除吗', function (index) {
                    //删除指定tr    del()方法
                    obj.del();
                    //关闭弹出层，（index是当前弹出层的下标）
                    layer.close(index);
                })
            }
        });
    })
</script>
3.4.8、开启单元格编辑
<table class="layui-table" id="tableCell" lay-data="{url:'../static/js/user.json'}" lay-filter="demo">
    <thead>
        <tr>
            <th lay-data="{type:'numbers'}"></th>
            <th lay-data="{field:'id',type:'checkbox',title:'ID'}"></th>
            <th lay-data="{field:'username',edit:'text',title:'userName',sort:true}"></th>
            <th lay-data="{field:'sex',edit:'text',title:'sex',unresize:true}"></th>
            <th lay-data="{field:'city',edit:'text',title:'city'}"></th>
        </tr>
    </thead>
</table>

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

        /**
         * 监听单元格编辑事件
         * 表头设置edit属性 单元格编辑类型（默认不开启）目前只支持：text（输入框）
         */
        table.on('edit(demo)', function (obj) {
            console.log(obj);
            var value = obj.value;  //获取修改后的值
            var data = obj.data;    //得到当前修改的tr对象
            var field = obj.field;  //得到修改的字段名
            layer.msg('id为：' + data.id + '的' + field + '的字段值修改为：' + value);
        });
    })
</script>
3.4.9、数据表格的重载
<!--搜索框-->
<div class="demoTable layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">搜索ID：</label>
        <div class="layui-input-inline">
            <input type="text" name="id" id="demoReload" placeholder="请搜索你想要的ID" autocomplete="off"
                   class="layui-input">
        </div>
        <button class="layui-btn" id="searchBtn">搜索</button>
    </div>
</div>

//加载table模块
layui.use('table', function () {
    var table = layui.table;
    var $ = layui.jquery;       //获取jquery对象
    /**
	 * 给指定元素绑定事件
	 */
    $(document).on('click', '#searchBtn', function (data) {
        //获取搜索文本框的值
        var searchText = $("#demoReload");
        //调用数据表格重载方法    table.reload(ID, options, deep)
        table.reload('table', {
            where: {        //设定需要传递的参数
                id: searchText.val(),
            },
            page: {
                curr: 1,        //表示让条件查询从第一页查询，如果未设置则从当前页开始查询，此页之前的所有数据不纳入条件筛选

            }
        })
    });

3.5、文件上传

模块加载名称：upload

3.5.1、快速使用
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>拖拽上传(只允许上传后缀为png格式的图片)</legend>
</fieldset>

<div class="layui-upload-drag" id="test">
    <i class="layui-icon"></i>
    <p>点击上传，或将文件拖拽到此处</p>
    <div class="layui-hide" id="uploadDemoView">
        <hr>
        <img src="" alt="上传成功后渲染" style="max-width: 196px">
    </div>
</div>

<script>
    //加载upload模块
    layui.use('upload', function () {
        var upload = layui.upload;

        //执行实例  拖拽上传
        upload.render({
            elem: '#test',
            url: 'https://httpbin.org/post',    //服务端上传接口  此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            method: '',     //可选项。HTTP类型，默认:post
            data: {}, //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
            accept: 'images',       //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
            exts: 'png',            //允许上传的文件后缀
            acceptMime: 'image/png',      //规定打开文件选择框时，筛选出的文件类型；只显示 png 文件
            size: '3072',       //设置文件最大可允许上传的大小，单位 KB      默认为：0（即不限制）
            multiple: 'true',           //是否允许多文件上传。设置 true即可开启     默认为：false
            number: '2',         //设置同时可上传的文件数量，一般配合 multiple 参数出现      默认为：0（即不限制）
            drag: 'true',            //是否接受拖拽的文件上传，设置 false 可禁用  默认为：true
            done: function (res) {
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
                console.log(res)
            }, error: function () {
                //请求异常回调
                layer.msg('上传失败');
            }
        });
    });
</script>
3.5.2、核心方法与基础参数选项

参考官方api

3.6、轮播图

模块加载名称：carousel

3.6.1、快速使用
<div class="layui-carousel" id="test">
    <div carousel-item>
        <div><img src="../static/image/birthday_banner_pc.jpg"></div>
        <div><img src="../static/image/byz_banner_pc.jpg"/></div>
        <div><img src="../static/image/login_bg.jpg"/></div>
        <div><img src="../static/image/longtou.jpg"/></div>
        <div><img src="../static/image/youflower_pc.jpg"/></div>
    </div>
</div>

<script>
    //加载carousel模块
    layui.use('carousel', function () {
        var carousel = layui.carousel;

        //建造实例
        carousel.render({
            elem: '#test',      //绑定元素
            width: '100%',      //设定轮播容器宽度，支持像素和百分比
            height: '480px',    //设定轮播高器高度，支持像素和百分比
            arrow: 'always',     //切换箭头默认显示状态，可选值为：hover（悬停显示）always（始终显示）none（始终不显示） 默认为：hover
            autoplay: true,        //是否自动切换  默认为：true
            interval: 2000,        //自动切换的时间间隔，单位：ms（毫秒），不能低于800   默认为：3000（3秒）
            index: 1,       //初始开始的条目索引  默认为：0（也就是从第一张图片开始显示）
            anim: 'default',   //轮播切换动画方式，可选值为：default（左右切换）updown（上下切换）fade（渐隐渐显切换） 默认为：default
            full: false,     //是否全屏轮播    默认为：false
        });
    });
</script>
3.6.2、基础参数

参考官方api

上下固定，中间滚动布局
jean_0920的博客
09-19 1198
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Layui
weixin_49982989的博客
12-11 412
Layui.js内部提供了许多底层引擎，同样也是整个Layui框架体系的有力支撑，尽管可能不会用到，但也要认识，以便需时使用 第三方支撑 Layui部分模块依赖jQuery(如:layer),但并不需要额外地加载jQuery。Layui已经将jQuery最稳定的一个版本改为layui的内部模块，当去使用layui之类的模块时，会自动判断你的页面是否已经引入了jQuery；如果没有，则自动加载内部的jQuery模块，如果有，则不会再加载。 规范 CSS内置公共基础类： ·layui-main 用于设置一个宽度
layui
Mh_ui的博客
03-08 774
弹出框插件layui: http://layer.layui.com/
springboot网站项目+layui框架动态渲染table表格数据信息
最新发布
yrldjsbk的博客
04-11 277
这个虽然是之前做过的项目，但是由于当时没有保存源码，丢失了源码，所以今天再次写一遍代码。1：第一步，使用layui插件，需要提前把它插件本身的js和css等静态资源导入，存入合适的位置即可。这个非常重要，因为，layui插件本身，渲染动态数据的时候，有它自己的一套规则。其实，这个并不困难，只要大家按照，遵守layui插件官方的要求去设计，即可快速完成动态数据的渲染效果。我这次展示的案例是，在后端页面，渲染所有的已经注册成功的用户信息。3，第三步，有了这个layui实体类，我们就可以开始写自己的业务接口了。
layui 1.0.9版本
05-30
layui是一款流行的前端UI框架，专为中国开发者设计，它提供了丰富的组件和优雅的API，使得Web开发更为便捷。layui 1.0.9是这个框架的一个早期版本，虽然现在已经有了更新迭代，但每个版本都有其独特的特性和应用场景...
layui-steps
11-15
layui-steps 是 LayUI 框架中的一个组件，它主要用来展示一系列操作流程或步骤，为用户提供了清晰的步骤导航。LayUI 是一款基于前端的轻量级模块化框架，它集成了丰富的组件和样式，使得开发者能够快速构建出美观且...
基于layui的表单设计器
03-25
《基于layui的表单设计器深度解析》 在Web应用开发领域，用户界面的构建往往是一项繁琐而关键的任务，尤其在处理复杂表单时。layui，一个轻量级、模块化的前端框架，因其丰富的组件和易用性，已经成为许多开发者的...
基于layui实现树形穿梭框
05-22
在IT行业中，layui是一款流行的前端UI框架，以其简洁、易用和高度可定制化的特点深受开发者喜爱。"基于layui实现树形穿梭框"是layui框架中的一个组件，用于构建交互式的树状结构选择器，常用于权限管理、数据分类...
layui后台管理系统完整版免费版本
05-22
layui是一款基于前端模块化开发的JavaScript框架，专为开发者提供一套高效的前端解决方案。这款后台管理系统完整版免费版本，集成了layui的核心组件和丰富的扩展模块，适用于快速构建企业级Web应用的后台界面。以下...
layui的优缺点
Qianyingqwer的博客
07-30 3870
layui的优缺点 优点： LayUi作为一款国产开源的前端UI，简单易上手，并且UI简洁美观。本身目标对象是不怎么懂前端的后端开发人员，也适合后端人员使用。 （1）layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。 （2）layui是提供给后端开发人员最好的ui框架，基于DOM驱动，只要不涉及到交互layui还是很不错的 缺点：由于LayUi是个人开源的项目并且开源时间不长，因此bug会比较多，也会有一些限制。兼容性也不强，尤其是在移动端。不由于设计的初衷，LayUi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值