精华内容
下载资源
问答
  • 菜鸟的layui学习总结

    万次阅读 多人点赞 2020-10-23 14:07:31
    菜鸟的layui学习总结说明一、概述(1)layui说明(2)layui引用二、图标(icon)二、按钮(button)三、导航栏(nav)四、选型卡(tab) 说明 更新时间:2020/10/12 02:41,更新到了建造者模式 本文现对layui进行一...

    说明

    更新时间:2020/10/23 14:04,更新完基本内容

    本文现对layui进行一次总结与记录,主要基于官网进行学习,下面会偏向与实战,建议结合官网与本文一起学习,本文会持续更新,不断地扩充

    注意:本文仅为记录学习轨迹,如有侵权,联系删除

    一、概述

    (1)layui说明

    下载地址:https://www.layui.com/

    下载完之后是一个压缩包,解压后的文件目录如下
    在这里插入图片描述
    这里注意几个文件,lay文件夹、layui.all.js和layui.js,这几个是有关联的,首先看一下lay文件夹,里面有一个modules文件夹,里面就是封装好的一个个的模块
    在这里插入图片描述
    这些模块可以去官网看一下,基本上官网上面的内置模块都有,除了个别可能要收费的layui没有开源
    在这里插入图片描述
    接下来是layui.all.js和layui.js这两个js文件,除了文件大小的区别之外,还有一个很重要的区别,layui.all.js把所有的内置模块都包含在里面了,使用的时候不用自己再去引入模块,而layui.js是一个空壳,里面没有引入模块,需要使用的时候可以按需引入,下面可以先简单了解一下引入方式
    在这里插入图片描述

    (2)layui引用

    引用的方式具体可以看官网
    在这里插入图片描述
    这里给出一个模块,css和js要根据自己的具体路径来

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    <!--具体内容一-->
    
    
    
    
    
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    </body>
    </html>
    
    
    

    二、图标(icon)

    简单瞄一眼官网上的图标
    在这里插入图片描述
    以实心图标为例,有 & #xe68f; 和 layui-icon-heart-fill 两种方式的使用,使用的方式如下,先引入layui-icon样式,后面再添加对应图标的标志即可

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    <!--方式一-->
    <h1>图标使用方式一</h1>
    <span class="layui-icon">&#xe68f;实心</span>
    <div class="layui-icon">&#xe68c;空心</div>
    <h1 class="layui-icon">&#xe68d;时间/历史</h1>
    <span class="layui-icon">&#xe689;蓝牙</span>
    
    <!--方式二-->
    <h1>图标使用方式二</h1>
    <span class="layui-icon layui-icon-heart-fill">实心</span>
    <div class="layui-icon layui-icon-heart">空心</div>
    <h1 class="layui-icon layui-icon-time">时间/历史</h1>
    <span class="layui-icon layui-icon-bluetooth">蓝牙</span>
    
    
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    </body>
    </html>
    

    在这里插入图片描述

    二、按钮(button)

    瞄一眼官网按钮说明
    在这里插入图片描述
    根据官网说明,用法那里是最简单的使用,当然它后面会给出各种样式,圆角、尺寸、图标等,只要按照它的描述引用即可,下面给出案例与讲解,注意,里面的具体样式要看着官网的说明来使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    <!--使用前先引入layui-btn样式,再根据需要引入各种圆角、图标等样式-->
    
    
    <!--基本用法-->
    <button type="button" class="layui-btn">一个标准的按钮</button>
    <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a><br><br><br><hr>
    
    <!--应用主题-->
    <button type="button" class="layui-btn layui-btn-danger">警告</button>
    <button type="button" class="layui-btn layui-btn-disabled">禁用</button><br><br><br><hr>
    
    <!--尺寸-->
    <button class="layui-btn layui-btn-lg">大型</button>
    <button class="layui-btn layui-btn-xs">迷你</button><br><br>
    <button type="button" class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button><br><br><br><hr>
    
    <!--圆角-->
    <!--圆角需要再额外引入样式layui-btn-radius,在这个基础上再进行其他样式的引入-->
    <button type="button" class="layui-btn layui-btn-radius ">默认</button>
    <button type="button" class="layui-btn layui-btn-radius layui-btn-normal">百搭</button>
    <button type="button" class="layui-btn layui-btn-radius layui-btn-dange">警告</button><br><br><br><hr>
    
    
    <!--图标按钮-->
    <button type="button" class="layui-btn">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
    
    <button type="button" class="layui-btn">
        <i class="layui-icon">&#xe673;</i>上锁
    </button>
    
    <button type="button" class="layui-btn">
        <i class="layui-icon">&#xe65b;</i>下一页
    </button>
    
    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
        <i class="layui-icon">&#xe602;</i>
    </button>
    
    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
        <i class="layui-icon">&#xe603;</i>
    </button>
    <br><br><br><hr>
    
    <!--按钮组-->
    <!--前面的每一个按钮都有自己的一段间距,而按钮组就是把一组按钮放在一起形成一个组,组里面按钮间没有间距-->
    <!--用法也简单,在一个div标签里面,将一组的按钮放在同一个div里面,同时在该div标签上引入layui-btn-group样式即可-->
    <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>
    <br><br><br><hr>
    
    <!--按钮容器-->
    <!--这个相当于在上面的按钮组上面加了个按钮间的间距-->
    <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>
    
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    </body>
    </html>
    

    三、导航栏(nav)

    同样的瞄一眼官网
    在这里插入图片描述
    导航栏主要用ul标签,里面引入layui-nav样式,除此之外还有垂直导航栏和侧边导航栏,只是在引入layui-nav的基础上再引入垂直样式或者侧边样式,除此之外还可以改变导航栏的样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    <!--水平导航栏-->
    <h2>水平导航栏</h2>
    <!--这里注意ul引入的样式layui-nav,li引入的样式layui-nav-item-->
    <!--注意:通过设定layui-this来指向当前页面分类。-->
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="#">最新活动</a></li>
        <!--设定layui-this来指向当前页面分类-->
        <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><br><br><br><br><hr>
    
    
    
    <!--水平导航栏嵌入图片和徽章-->
    <h2>水平导航栏嵌入图片和徽章</h2>
    <ul class="layui-nav">
        <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>
        <li class="layui-nav-item">
            <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img"></a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="javascript:;">退了</a></dd>
            </dl>
        </li>
    </ul><br><br><br><br><hr>
    
    <!--水平导航栏的其他样式-->
    <!--水平导航支持的其它背景主题有:layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)-->
    <h2>水平导航栏的其他样式</h2>
    <ul class="layui-nav layui-bg-blue" lay-filter="">
        <li class="layui-nav-item"><a href="#">最新活动</a></li>
        <!--设定layui-this来指向当前页面分类-->
        <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><br><br><br><br><hr>
    
    
    <!--垂直导航栏-->
    <!--需要引入layui-nav-tree样式-->
    <h2>垂直导航栏</h2>
    <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>
    
    
    <!--侧边导航栏-->
    <!--需要引入layui-nav-tree layui-nav-side样式-->
    <h2>侧边导航栏</h2>
    <ul class="layui-nav layui-nav-tree layui-nav-side" 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>
    
    
    
    
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        //注意:导航 依赖 element 模块,否则无法进行功能性操作
        layui.use(["element"],function () {
            var element = layui.element;
        })
    
    </script>
    </body>
    </html>
    
    

    注意:使用导航栏记得引入element模块才可以使用

    四、选型卡(tab)

    继续瞄一眼官网
    在这里插入图片描述
    详细可以官网,这里重点讲一下选项卡之间的监听事件,以及相关的点击事件,新增删除选型卡等,这里需要看一下layui的element模块,tab选型卡的事件都是由它进行控制的,由于比较多,这里已经把详细的使用以及代码的理解写在下面的html代码里面了,看一下会有不少收获

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    <!--
    选型卡风格:默认(layui-tab)、简洁风格(layui-tab  layui-tab-brief)、卡片风格(layui-tab  layui-tab-card),例如卡片风格:
                    <div class="layui-tab layui-tab-card">
                        <ul>
                        ......
                        </ul>
                    </div>
    
    
    tab选型卡删除:你可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除,例如:
                    <div class="layui-tab" lay-allowClose="true">
                        <ul>
                        ......
                        </ul>
                    </div>
    
    tab选项卡监听事件:根据官网给出的说明,有监听Tab选项卡切换事件、监听Tab监听选项卡删除事件、监听导航菜单的点击事件、监听折叠面板展开或收缩事件
    
            (1)监听Tab选项卡切换事件:主要通过lay-filter属性进行监听, element.on('tab(filter值)', function(data){ 内容  })
                        html部分:
                        <div class="layui-nav" lay-filter="test1">
                            <ul>
                            ......
                            </ul>
                        </div>
    
                        layui部分:
                        element.on('tab(test1)', function(data){
                          console.log(this); //当前Tab标题所在的原始DOM元素
                          console.log(data.index); //得到当前Tab的所在下标
                          console.log(data.elem); //得到当前的Tab大容器
                        });
    
            (2)监听Tab监听选项卡删除事件:主要通过lay-filter属性进行监听,element.on('tabDelete(filter值)', function(data){ 内容  })
                        html部分:
                        <div class="layui-nav" lay-filter="test1">
                            <ul>
                            ......
                            </ul>
                        </div>
    
                        layui部分:
                        element.on('tabDelete(filter)', function(data){
                          console.log(this); //当前Tab标题所在的原始DOM元素
                          console.log(data.index); //得到当前Tab的所在下标
                          console.log(data.elem); //得到当前的Tab大容器
                        });
    
            (3)监听导航菜单的点击事件:主要通过lay-filter属性进行监听,element.on('nav(filter值)', function(data){ 内容  })
                        html部分:
                        <div class="layui-nav" lay-filter="test1">
                            <ul>
                            ......
                            </ul>
                        </div>
    
                        layui部分:
                        element.on('nav(filter)', function(data){
                          console.log(this); //当前Tab标题所在的原始DOM元素
                          console.log(data.index); //得到当前Tab的所在下标
                          console.log(data.elem); //得到当前的Tab大容器
                        });
    
    
            (4)监听折叠面板展开或收缩事件:主要通过lay-filter属性进行监听,element.on('collapse(filter值)', function(data){ 内容  })
                        html部分:
                        <div class="layui-nav" lay-filter="test1">
                            <ul>
                            ......
                            </ul>
                        </div>
    
                        layui部分:
                        element.on('collapse(filter)', function(data){
                          console.log(this); //当前Tab标题所在的原始DOM元素
                          console.log(data.index); //得到当前Tab的所在下标
                          console.log(data.elem); //得到当前的Tab大容器
                        });
    
    
    其余功能:
            (1)element.on(filter, callback);上面用到的选项卡监听
    
            (2)element.tabAdd(filter, options):用于新增一个Tab选项
                例如:
                    element.tabAdd('demo', {
                      title: '选项卡的标题'
                      ,content: '选项卡的内容' //支持传入html
                      ,id: '选项卡标题的lay-id属性值'
                    });
    
            (3)element.tabDelete(filter, layid):用于删除指定的Tab选项
                例如:
                    可以在对应的tab选项卡上面添加lay-id:  <li lay-id="22">用户管理</li>
                    element.tabDelete('demo', 'xxx'); //删除 lay-id="xxx" 的这一项
    
            (4)element.tabChange(filter, layid):用于外部切换到指定的Tab项上
                例如:
                    element.tabChange('demo', 'layid'); //切换到 lay-id="yyy" 的这一项
    
            (5)element.tab(options):用于绑定自定义 Tab 元素(即非 layui 自带的 tab 结构)
                例如:
                    //HTML
                    <ul id="tabHeader">
                      <li>标题1</li>
                      <li>标题2</li>
                      <li>标题3</li>
                    </ul>
                    <div id="tabBody">
                      <div class="xxx">内容1</div>
                      <div class="xxx">内容2</div>
                      <div class="xxx">内容4</div>
                    </div>
    
                    //JavaScript
                    element.tab({
                      headerElem: '#tabHeader>li' //指定tab头元素项
                      ,bodyElem: '#tabBody>.xxx' //指定tab主体元素项
                    });
    
    -->
    
    
    <!--选型卡风格-->
    <h2>默认风格</h2>
    <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>
    
    <h2>卡片风格</h2>
    <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">
            <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><br><br><br><hr>
    
    
    <!--tab选型卡删除-->
    <h2>删除卡片</h2>
    <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><br><br><br><hr>
    
    
    
    
    <!--tab选项卡监听事件-->
    <h2>tab选项卡监听事件</h2>
    <div class="layui-tab" lay-allowClose="true" lay-filter = "test1">
        <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.js-->
    <script src="../../static/layui/layui.js"></script>
    
    <script>
        //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function(){
            var element = layui.element;
            
    
            //监听Tab选项卡切换事件
            element.on('tab(test1)',function (data) {
                alert("选型卡下标(切换):"+data.index);
                console.log(this); //当前Tab标题所在的原始DOM元素
                console.log(data.index); //得到当前Tab的所在下标
                console.log(data.elem); //得到当前的Tab大容器
            });
    
            //监听Tab监听选项卡删除事件
            element.on('tabDelete(test1)', function(data){
                alert("选项卡删除:"+data.index);
                console.log(this); //当前Tab标题所在的原始DOM元素
                console.log(data.index); //得到当前Tab的所在下标
                console.log(data.elem); //得到当前的Tab大容器
            });
    
            //监听导航菜单的点击事件
            element.on('nav(test1)', function(data){
                alert("导航菜单的点击事件");
                console.log(elem); //得到当前点击的DOM对象
            });
        });
    </script>
    </body>
    </html>
    
    

    在这里插入图片描述
    相关样式:
    在这里插入图片描述
    相关属性
    在这里插入图片描述

    详细的属性建议直接看官网

    五、进度条(progress)

    继续瞄一眼官网
    在这里插入图片描述
    基本的使用官网已经有介绍,重点关注里面的几个样式和属性

    layui-progress代表一个进度条样式
    layui-progress-bar代表进度条里面的进度样式
    layui-progress-big变大样式
    lay-percent代表进度值属性
    lay-showpercent=“true”是否显示进度值属性
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    <!--
    默认进度条:外层div需要引入layui-progress,里面div需要引入与layui-progress-bar,并且通过lay-percent设置进度,可以百分比可以像素
        例如:
            <div class="layui-progress">
                <div class="layui-progress-bar" lay-percent="10%"></div>
            </div>
    
    
    显示文本进度条:对父级元素设置属性 lay-showPercent="yes" 来开启进度比的文本显示,支持:普通数字、百分数、分数
        例如:
            <div class="layui-progress" lay-showPercent="yes">
                <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
            </div><br><br>
    
    
    进度条颜色与尺寸:颜色可以通过layui的颜色库进行选择,例如红色:layui-bg-red,大尺寸进度:layui-progress-big
        例如:
            <h2>进度条颜色</h2>
            <div class="layui-progress">
                <div class="layui-progress-bar layui-bg-blue" lay-percent="10%"></div>
            </div><br><br>
    
            <h2>进度条尺寸</h2>
            <div class="layui-progress">
                <div class="layui-progress-bar layui-progress-big" lay-percent="20%"></div>
            </div><br><br><br><hr>
    
    
    -->
    
    
    <!--默认进度条-->
    <h2>进度条(默认)</h2>
    <div class="layui-progress">
        <div class="layui-progress-bar" lay-percent="10%"></div>
    </div><br><br><br><hr>
    
    <!--显示文本进度条-->
    <h2>显示文本进度条</h2>
    <div class="layui-progress" lay-showPercent="true">
        <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
    </div><br><br>
    
    <div class="layui-progress" lay-showPercent="yes">
        <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
    </div><br><br>
    
    <div class="layui-progress layui-progress-big" lay-showPercent="yes">
        <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
    </div><br><br>
    
    
    
    <!--颜色与尺寸-->
    <h2>进度条颜色</h2>
    <div class="layui-progress">
        <div class="layui-progress-bar layui-bg-blue" lay-percent="10%"></div>
    </div><br><br>
    
    <h2>进度条尺寸</h2>
    <div class="layui-progress">
        <div class="layui-progress-bar layui-progress-big" lay-percent="20%"></div>
    </div><br><br><br><hr>
    
    
    <!--动态进度条-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>动态改变进度</legend>
    </fieldset>
    
    <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
        <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
    </div>
    
    <div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
        <button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
        <button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
    </div>
    
    
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        //注意进度条依赖 element 模块,否则无法进行正常渲染和功能性操作
        layui.use('element', function(){
            var $ = layui.jquery;//获取js
            var element = layui.element;//获取layui
    
    
    
            //触发事件
            var active = {
                setPercent: function(){
                    //设置50%进度
                    element.progress('demo', '50%')
                }
                ,loading: function(othis){
                    var DISABLED = 'layui-btn-disabled';
                    if(othis.hasClass(DISABLED)) return;
    
                    //模拟loading
                    var n = 0, timer = setInterval(function(){
                        n = n + Math.random()*10|0;
                        if(n>100){
                            n = 100;
                            clearInterval(timer);
                            othis.removeClass(DISABLED);
                        }
                        element.progress('demo', n+'%');
                    }, 300+Math.random()*1000);
    
                    othis.addClass(DISABLED);
                }
            };
    
            $('.site-demo-active').on('click', function(){
                var othis = $(this), type = $(this).data('type');
                active[type] ? active[type].call(this, othis) : '';
            });
    
    
        });
    </script>
    </body>
    </html>
    
    

    在这里插入图片描述

    六、徽章(dot)

    这个可以简单理解为一个小圆点,官网的解释如下
    在这里插入图片描述
    使用起来也十分简单,这里直接给案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    
    
    <!--小圆点,通过 layui-badge-dot 来定义,里面不能加文字-->
    <h2>小圆点,通过 layui-badge-dot 来定义,里面不能加文字</h2>
    <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>
    <br><br><br><br><hr>
    
    <!--椭圆体,通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式-->
    <h2>椭圆体,通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式</h2>
    <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>
    <br><br><br><br><hr>
    
    <!--边框体,通过 layui-badge-rim 来定义-->
    <h2>边框体,通过 layui-badge-rim 来定义</h2>
    <span class="layui-badge-rim">6</span>
    <span class="layui-badge-rim">Hot</span>
    <br><br><br><br><hr>
    
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    </body>
    </html>
    
    

    在这里插入图片描述

    七、面板(card)

    面板有卡片面板,这个不用引入element模块,但是像折叠面板、手风琴面板就需要引入element模块,看一下官网的定义
    在这里插入图片描述
    这个的使用也间单,直接上案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    <!--
    一般的面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于:QA说明、帮助文档等
    
    卡片面板:默认卡片面板需要引入layui-card样式,该面板不需要引入element模块,如果你的网页采用的是默认的白色背景,不建议使用卡片面板
        例如:
            <div class="layui-card">
              <div class="layui-card-header">卡片面板</div>
              <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主体内<br>
                从而映衬出边框投影
              </div>
            </div>
    
    
    
     折叠面板:可以点击折叠面板,节省了空间,需要引入element空间
        例如:
             <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>
    
    
    
    -->
    
    <!--卡片面板-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>卡片面板</legend>
    </fieldset>
    
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        卡片式面板面板通常用于非白色背景色的主体内<br>
                        从而映衬出边框投影
                    </div>
                </div>
            </div>
    
    
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        结合 layui 的栅格系统<br>
                        轻松实现响应式布局
                    </div>
                </div>
            </div>
    
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">标题</div>
                    <div class="layui-card-body">
                        内容
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    
    <!--折叠面板-->
    <h2>折叠面板</h2>
    <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>
    
    
    
    
    
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        //注意:折叠面板 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function(){
            var element = layui.element;
    
            //…
        });
    </script>
    </body>
    </html>
    
    

    在这里插入图片描述

    八、颜色选择器(colorpicker)

    官网在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    <!--
    注意颜色选择器需要用到:colorpicker模块
    
    颜色选择器:它支持 hex、rgb、rgba 三类色彩模式,在代码中简单的调用后,便可在你的网页系统中自由拖拽去选择你中意的颜色,模块加载名称:colorpicker
    
        (1)常规使用:html部分只需要随便一个标签,给个id,然后全部交给colorpicker模块控制
                例如:
                     <div id="test1"></div>
    
                     colorpicker.render({
                        elem: '#test1'  //绑定元素
                    });
    
        (2)表单赋值:将选择的颜色回调给表单进行提交,实现的方式也简单,通过颜色选择器的回调,将选中的颜色通过jq赋值给表单即可
                例如:
                    即表单后面加个选择器,标好id
                    <input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test3-form-input">
                    <div id="test3"></div>
    
                    //表单赋值
                    colorpicker.render({
                        elem:"#test3",//绑定元素
                        //函数回调,表单赋值
                        done:function (color) {
                            $("#test3-form-input").val(color)
                        }
                    });
    
    
    
    
    
    这里给出colorpicker模块的详细参数:
    (1)elem	指向容器选择器	string/object	-
    (2)color	默认颜色,不管你是使用 hex、rgb 还是 rgba 的格式输入,最终会以指定的格式显示。	string	-
    (3)format	颜色显示/输入格式,可选值: hex、rgb
    若在 rgb 格式下开启了透明度,格式会自动变成 rgba。在没有输入颜色的前提下,组件会默认为 #000 也就是黑色。	string	hex(即 16 进制色值)
    (4)alpha	是否开启透明度,若不开启,则不会显示透明框。开启了透明度选项时,当你的默认颜色为 hex 或 rgb 格式,组件会默认加上值为 1 的透明度。相同的,当你没有开启透明度,却以 rgba 格式设置默认颜色时,组件会默认没有透明度。
    注意:该参数必须配合 rgba 颜色值使用	boolean	false
    (5)predefine	预定义颜色是否开启	boolean	false
    (6)colors	预定义颜色,此参数需配合 predefine: true 使用。	Array	此处列举一部分:['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)']
    (7)size	下拉框大小,可以选择:lg、sm、xs。	string	-
    
    -->
    <!--常规使用-->
    <h2>常规使用</h2>
    <div id="test1"></div>
    <div id="test2"></div>
    
    
    
    <!--表单赋值-->
    <div class="layui-input-inline" style="width: 120px;">
        <input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test3-form-input">
    </div>
    <div id="test3"></div>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use('colorpicker', function(){
            //获取该模块
            var colorpicker = layui.colorpicker;
    
            //获取jquery模块
            var $ = layui.jquery;
    
            //常规使用
            colorpicker.render({
                elem: '#test1',  //绑定元素
                //回调选中的颜色
                done: function(color){
                    alert('选择了:'+ color, this.elem);
                }
            });
    
            colorpicker.render({
                elem: '#test2',  //绑定元素
                color: '#2ec770' //设置默认色
            });
    
    
            //表单赋值
            colorpicker.render({
                elem:"#test3",//绑定元素
                //函数回调,表单赋值
                done:function (color) {
                    $("#test3-form-input").val(color)
                }
            });
        });
    </script>
    </body>
    </html>
    
    

    在这里插入图片描述

    九、轮播(carousel)

    轮播算是比较常用的一个,具体使用还是得看官网
    在这里插入图片描述
    下面是它的一些简单使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    <!--
    注意:轮播需要用到carousel模块
    
    简单轮播:常规的左右轮播的形式,使用的方式也简单
        例如:
            <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>
    
             carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
              });
    
    注意:参数选择可以参考官网,下面列出一些参数
    
    
    
    
    (1)elem	指向容器选择器,如:elem: '#id'。也可以是DOM对象	string/object	无
    (2)width	设定轮播容器宽度,支持像素和百分比	string	'600px'
    (3)height	设定轮播容器高度,支持像素和百分比	string	'280px'
    (4)full	是否全屏轮播	boolean	false
    (5)anim	轮播切换动画方式,string	'default',可选值为:
                                        default(左右切换)
                                        updown(上下切换)
                                        fade(渐隐渐显切换)
    
    (6)autoplay	是否自动切换	boolean	true
    (7)interval	自动切换的时间间隔,单位:ms(毫秒),不能低于800	number	3000
    (8)index	初始开始的条目索引	number	0
    (9)arrow	切换箭头默认显示状态,string	'hover',可选值为:
                                        hover(悬停显示)
                                        always(始终显示)
                                        none(始终不显示)
    
    (10)indicator	指示器位置,可选值为:
                                        inside(容器内部)
                                        outside(容器外部)
                                        none(不显示)
    
                                        注意:如果设定了 anim:'updown',该参数将无效	string	'inside'
    (11)trigger	指示器的触发事件	string	'click'
    
    
    
    -->
    <div class="layui-carousel" id="test1" lay-filter="test1">
        <div carousel-item>
            <div><img src="../../static/layui/img/1.jpg" height="400px"></div>
            <div><img src="../../static/layui/img/2.jpg" height="400px"></div>
            <div><img src="../../static/layui/img/3.jpg" height="400px"></div>
            <div><img src="../../static/layui/img/4.jpg" height="400px"></div>
        </div>
    </div>
    <!-- div中可以是任意内容,如:<img src=""> -->
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['carousel'],function () {
            //获取轮播模块
            let carousel = layui.carousel;
    
            //常规轮播
            carousel.render({
                elem: '#test1',
                height:'400px',
                width: '100%', //设置容器宽度
                arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
    
            //监听轮播切换事件
            carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
                alert(obj.index)
                console.log(obj.index); //当前条目的索引
                console.log(obj.prevIndex); //上一个条目的索引
                console.log(obj.item); //当前条目的元素对象
            });
        })
        //建造实例
    
    </script>
    </body>
    </html>
    
    

    在这里插入图片描述

    十、时间与日期选择器(laydate)

    看一下官网的定义
    在这里插入图片描述
    官网给了很多参数,可以根据实际进行设置,下面代码给了大部分的参数说明以及使用,详细的可以看官网

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    <!--
    时间与日期选择器:这个是开发过程中经常使用到的组件,有必要重点讲一下,它是使用方式也十分简单,重点是laydate模块的渲染
    例如:
        HTML:
            <input type="text" id="test1">
        js:
            laydate.render({
                elem:"#test1",//指定元素
    
                //这里也可以加上其他参数进行数据渲染
            });
    
       注意:重点是js里面渲染的详细参数,下面开始介绍各种参数的使用
    
    
    详细参数说明:
    (1)type - 控件选择类型,类型:String,默认值:date,用于单独提供不同的选择器类型,可选值如下表:
            year	年选择器	只提供年列表选择
            month	年月选择器	只提供年、月选择
            date	日期选择器	可选择:年、月、日。type默认值,一般可不填
            time	时间选择器	只提供时、分、秒选择
            datetime	日期时间选择器	可选择:年、月、日、时、分、秒
    
    
    
    (2)range - 开启左右面板范围选择,类型:Boolean/String,默认值:false,如果设置 true,将默认采用 “ - ” 分割。
    
    
    (3)format-自定义格式,类型:String,默认值:yyyy-MM-dd,参数如下:
            yyyy	年份,至少四位数。如果不足四位,则前面补零
            y	年份,不限制位数,即不管年份多少位,前面均不补零
            MM	月份,至少两位数。如果不足两位,则前面补零。
            M	月份,允许一位数。
            dd	日期,至少两位数。如果不足两位,则前面补零。
            d	日期,允许一位数。
            HH	小时,至少两位数。如果不足两位,则前面补零。
            H	小时,允许一位数。
            mm	分钟,至少两位数。如果不足两位,则前面补零。
            m	分钟,允许一位数。
            ss	秒数,至少两位数。如果不足两位,则前面补零。
            s	秒数,允许一位数。
            通过上述不同的格式符组合成一段日期时间字符串,可任意排版
    
    
    (4)value - 初始值,可以通过new Date()设置初始值
    
    (5)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日
    
    
    (6)position - 定位方式,类型:String,默认值:absolute,
        用于设定控件的定位方式,有以下三种可选值:
        position 可选值	说明
        abolute	绝对定位,始终吸附在绑定元素周围。默认值
        fixed	固定定位,初始吸附在绑定元素周围,不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。
        static	静态定位,控件将直接嵌套在指定容器中。
        注意:请勿与 show 参数的概念搞混淆。show为 true 时,控件仍然是采用绝对或固定定位。而这里是直接嵌套显示
    
    
    (7)lang - 语言,类型:String,默认值:cn,我们内置了两种语言版本:cn(中文版)、en(国际版,即英文版)。这里并没有开放自定义文字,是为了避免繁琐的配置
    
    (8)theme - 主题,类型:String,默认值:default
        我们内置了多种主题,theme的可选值有:default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)
    
    (9)calendar - 是否显示公历节日,类型:Boolean,默认值:false
        我们内置了一些我国通用的公历重要节日,通过设置 true 来开启。国际版不会显示。
    
    ......
    还有一些其他的参数,可以直接去官网看一下
    
    -->
    
    <!--type参数-->
    <div>
        <span>type参数</span>
        日期:<input type="text" id="test1">
    </div><br><br><br><hr>
    
    <!--range参数-->
    <div>
        <span>range参数</span>
        日期:<input type="text" id="test2">
    </div><br><br><br><hr>
    
    <!--format参数-->
    <div>
        <span>format参数</span>
        日期:<input type="text" id="test3">
    </div><br><br><br><hr>
    
    <!--value参数-->
    <div>
        <span>value参数</span>
        日期:<input type="text" id="test4">
    </div><br><br><br><hr>
    
    <!--min/max参数-->
    <div>
        <span>min/max参数</span>
        时间有效范围设定在: 上午九点半到下午五点半 日期:<input type="text" id="test5">
    </div><br><br><br><hr>
    <div>
        <span>min/max参数</span>
        日期时间有效范围的设定 日期:<input type="text" id="test6">
    </div><br><br><br><hr>
    
    <div>
        <span>min/max参数</span>
        日期有效范围限定在:过去一周到未来一周 日期:<input type="text" id="test7">
    </div><br><br><br><hr>
    
    
    <!--position参数-->
    <div>
        <span>position参数</span>
        日期:<input type="text" id="test8">
    </div><br><br><br><hr>
    
    <!--lang参数-->
    <div>
        <span>lang参数</span>
        日期:<input type="text" id="test9">
    </div><br><br><br><hr>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['laydate'],function () {
            let laydate = layui.laydate;
    
            //type参数
            laydate.render({
                elem:"#test1",//指定元素
                type:'year',//年选择器
    
                //这里也可以加上其他参数进行数据渲染
            });
    
    
            //range参数
            laydate.render({
                elem:"#test2",
                // range:true,
                range:"~",//或 range: '~' 来自定义分割字符
            });
    
            //format参数
            laydate.render({
                elem:"#test3",
                format:"yyyy-MM-dd HH:mm:ss"
            });
    
            //value参数
            laydate.render({
                elem:"#test4",
                value:new Date(),
            });
    
    
            //min/max参数
            laydate.render({
                elem: '#test5'
                ,type: 'time'
                //时间有效范围设定在: 上午九点半到下午五点半
                ,min: '09:30:00'
                ,max: '17:30:00'
            });
    
            laydate.render({
                elem: '#test6'
                ,type: 'datetime'
                //日期时间有效范围的设定:
                ,min: '2017-8-11 12:30:00'
                ,max: '2017-8-18 12:30:00'
            });
    
            laydate.render({
                elem: '#test7'
                //日期有效范围限定在:过去一周到未来一周
                ,min: -7 //7天前
                ,max: 7 //7天后
            });
    
    
            //position参数
            laydate.render({
                elem: '#test8',
                position:"fixed",
    
            });
    
    
            //lang参数
            laydate.render({
                elem: '#test9',
                lang:"en"
    
            });
    
        })
    </script>
    </body>
    </html>
    
    

    在这里插入图片描述

    十一、表单元素

    表单元素包括输入框、密码框、下拉框等表单提交相关的元素,这个是比较重要的一块。先把官网地址丢在这里,需要时可以看一下

    (1)输入框与密码框

    这里把这两个放在一起讲,因为使用方式基本一致。
    layui的表单格式如下:

    <!--
    (1)layui表单form格式:
            <form class="layui-form" action="">
    
                <div class="layui-form-item">
                    ......
                </div>
    
                <div class="layui-form-item">
                    ......
                </div>
    
                <div class="layui-form-item">
                    ......
                </div
    
            </form>
            注意样式的引入,layui-form和layui-form-item
    
    (2)form里面的表单元素:
                <div class="layui-form-item">
    
                    <div class="layui-input-block">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
    
    
                    <div class="layui-input-inline">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
    
                    ......
                </div
                注意:上面展示了两种样式layui-input-block和layui-input-inline
    
    -->
    

    注意样式的引入,layui-form和layui-form-item,如果表单中有用到layui的下拉控件这样的需要重新渲染的组件的话,需要加入layui-form样式,如果只有输入框密码框这样的话可以不加

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    <!--
    (1)layui表单form格式:
            <form class="layui-form" action="">
    
                <div class="layui-form-item">
                    ......
                </div>
    
                <div class="layui-form-item">
                    ......
                </div>
    
                <div class="layui-form-item">
                    ......
                </div
    
            </form>
    
    (2)form里面的表单元素:
                <div class="layui-form-item">
    
                    <div class="layui-input-block">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
    
    
                    <div class="layui-input-inline">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
    
                    ......
                </div
                注意:上面展示了两种样式layui-input-block和layui-input-inline
    
    -->
    
    <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">
                <div class="layui-inline">
                    <label class="layui-form-label">用户密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="phone" lay-verify="required|phone" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">验证邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">验证手机</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                    </div>
                </div>
    
    
            </div>
    
    </form>
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    </body>
    </html>
    
    

    注意两种样式layui-input-block和layui-input-inline的展现形式
    在这里插入图片描述

    (2)下拉框

    下拉框的使用跟上面的输入框和密码框有一点区别,下拉框需要引入layui-form样式,同时需要form模块的引入

    <!--下拉框:需要引入form模块-->
    <form class="layui-form">
        <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" selected>上海</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-inline">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2" selected>广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
    
    
    </form>
    

    在这里插入图片描述

    (3)单选框、开关和复选框

    这两个的使用需要引入的模块跟下拉框的一样,下面直接给出代码,注意form模块的引入

    <!--单选框、开关和复选框-->
    <form class="layui-form">
    
        <!--复选框tyep = checkbox-->
        <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>
    
        <!--开关type也是checkbox,但这里需要引入lay-skin属性-->
        <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>
    
        <!--单选框type = radio-->
        <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>
    
    </form>
    <br><br><br><br><hr>
    

    在这里插入图片描述

    (3)文本域

    <!--文本域-->
    <form class="layui-form">
        <!--注意:这里注意引入layui-form-text样式-->
        <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>
    </form>
    

    在这里插入图片描述

    十二、表单对象form模块

    form是layui提供的众多模块中的一种,也是很重要的模块之一,下面直接进入官网进行查看

    (1)更新渲染

    有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行 form.render(type, filter); 方法即可。
    在这里插入图片描述
    下面直接给出例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    <!--更新渲染-->
    <form class="layui-form" lay-filter="test1">
    
        <div class="layui-form-item">
            <label class="layui-form-label">下拉选择框</label>
            <div class="layui-input-block">
                <select name="aihao" lay-filter="aihao" id="aihao">
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                    <option value="2">游戏</option>
                </select>
            </div>
        </div>
    
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="addSelect">下拉框增加睡觉选项</button>
            </div>
        </div>
    </form>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['form'],function () {
            //获取form模块
            var form = layui.form;
            //获取js
            var $ = layui.jquery;
    
            $('#addSelect').on('click',function () {
                $("#aihao").append("<option value='4'>" +  '睡觉' + "</option>");
    
                alert("添加了睡觉下拉选项")
                //如果不用form模块的render()进行数据的重新更新渲染,新添加的选项不会显示在下拉列表那里
                // form.render(); //更新全部
                form.render('select', 'test1'); //更新 lay-filter="test1" 所在容器内的全部 select 状态
            })
    
    
        })
    </script>
    </body>
    </html>
    

    这里有个重点,form标签那里必须引入layui-form样式,同时需要引入lay-filter属性,这样才能根据lay-filter去刷新对应的组件

    在这里插入图片描述

    (2)预设元素属性

    具体可以去看看官网的说法,我的理解是在input标签中的lay-verify、lay-skin、lay-filter、lay-submit神马的都是我们所说的预设的元素属性,他们可以使得一些交互操作交由form模块内部、或者你来借助form提供的JS接口精确控制。下面是官网的给出的目前支持的属性
    在这里插入图片描述
    这些属性下面可能会用到,这里先简单了解一下。

    (3)事件监听

    语法:form.on(‘event(过滤器值)’, callback);
    form模块在 layui 事件机制中注册了专属事件,所以当你使用layui.onevent()自定义模块事件时,请勿占用form名。form支持的事件如下:
    在这里插入图片描述
    一般来讲,监听只需要一个lay-filter属性即可,注意单选框、复选框和开关等的监听事件,已经它们的lay-filter的添加,下面直接给案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    <!--事件监听-->
    <form class="layui-form" lay-filter="test2"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
    
        <!--监听下拉框:select-->
        <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>
                    <option value="2">游戏</option>
                    <option value="3">睡觉</option>
                </select>
            </div>
        </div>
    
        <!--监听复选框:checkbox-->
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" value="写作" title="写作" lay-filter="fxk">
                <input type="checkbox" name="like[read]" value="阅读" title="阅读" lay-filter="fxk">
            </div>
        </div>
    
        <!--监听开关:switch-->
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="checkbox" checked lay-skin="switch" value="开关的值" lay-text="开|关" lay-filter="kg">
            </div>
        </div>
    
        <!--监听单选框:radio     -->
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="" lay-filter="sex">
                <input type="radio" name="sex" value="1" title="" checked lay-filter="sex">
            </div>
        </div>
    
        <!--监听提交事件:submit-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="tj">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['form'],function () {
            //获取form模块
            var form = layui.form;
            //获取js
            var $ = layui.jquery;
    
    
    
            /**事件监听**/
            //监听下拉框:select
            form.on('select(aihao)',function (data) {
                alert(data.value);
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
            });
            //监听复选框:checkbox
            form.on('checkbox(fxk)',function (data) {
                alert(data.value);
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
            });
            //监听开关:switch
            form.on('switch(kg)',function (data) {
                alert(data.value);
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
            });
            //监听单选框:radio
            form.on('radio(sex)',function (data) {
                alert(data.value);
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
            });
            //监听提交事件:submit
            form.on('submit(tj)',function (data) {
                console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
                console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
                return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
            });
    
    
        })
    </script>
    </body>
    </html>
    
    

    在这里插入图片描述

    (4)表单赋值/取值

    这个适用于编辑的情况,它官网给的很笼统,只是简单提了一下,实际上这个还是很重要的一个点
    在这里插入图片描述

    注意:官网给的目前无法给复选框赋初值,只能通过js进行循环遍历赋初值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    
    
    <!--表单赋值/取值-->
    <form class="layui-form" lay-filter="test3"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
    
        <!--输入框-->
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" name="username" id="username" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
    
        <!--下拉框:select-->
        <div class="layui-form-item">
            <label class="layui-form-label">爱好</label>
            <div class="layui-input-block">
                <select name="hobby" id="hobby" lay-filter="hobby">
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                    <option value="2">游戏</option>
                    <option value="3">睡觉</option>
                </select>
            </div>
        </div>
    
        <!--复选框:checkbox-->
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="hobby2" value="写作" title="写作" lay-filter="hobby2">
                <input type="checkbox" name="hobby2" value="阅读" title="阅读" lay-filter="hobby2">
                <input type="checkbox" name="hobby2" value="游戏" title="游戏" lay-filter="hobby2">
    
            </div>
        </div>
    
        <!--开关:switch-->
        <div class="layui-form-item">
            <label class="layui-form-label">是否</label>
            <div class="layui-input-block">
                <input type="checkbox" checked lay-skin="switch" value="是否的值" lay-text="开|关" name="yesno" lay-filter="yesno">
            </div>
        </div>
    
        <!--单选框:radio     -->
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="" lay-filter="xb">
                <input type="radio" name="sex" value="1" title="" checked lay-filter="xb">
            </div>
        </div>
    
        <!--提交事件:submit-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="tj">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <button type="button" class="layui-btn" id="getValue">获取表单的值</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['form'],function () {
            //获取form模块
            var form = layui.form;
            //获取js
            var $ = layui.jquery;
    
    
    
    
            /**表单赋值/取值**/
            //给表单赋值(除了复选框)
            form.val("test3", { //test3 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                "username": "贤心" // "name": "value"
                ,"hobby":1
                // ,"hobby2":[true]
                ,"yesno":"yes"
                ,"xb":1
                ,"sex": "女"
            });
    
            //复选框的赋初值
            var hobby="写作,游戏";
            var hobbys=hobby.split(",");
            var hobbyElem=$("[name='hobby2']");
            $.each(hobbys,function(i,str){
                alert(str);
                $.each(hobbyElem,function(j,item){
                    var jdom=$(item);// 把dom--转jdom
                    if(jdom.val()==str){
                        //jdom.attr({"checked",true});
                        jdom.attr("checked","checked");
                    }
                })
            });
            form.render();
    
            //获取表单区域所有值
            $("#getValue").on("click",function () {
                var data1 = form.val("test3");
                alert(data1.username)
                console.log(data1)
            });
    
    
    
    
        })
    </script>
    </body>
    </html>
    
    

    注意复选框、单选框和开关的name的取值

    在这里插入图片描述

    (4)表单验证

    表单验证是通过lay-verify属性进行校验的,同时注意在提交按钮上添加lay-submit属性,不然无法校验,下面給代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    
    
    <!--表单验证-->
    <form class="layui-form" lay-filter="test4"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
    
        <!--用户名-->
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <!--required:表示非空校验-->
                <input type="text" name="username2" id="username2" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
    
    
        <!--电话自定义校验-->
        <div class="layui-form-item">
            <label class="layui-form-label">密码(自定义校验规则)</label>
            <div class="layui-input-block">
                <input type="text" name="pass" id="pass" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="pass">
            </div>
        </div>
    
    
        <!--身份证-->
        <div class="layui-form-item">
            <label class="layui-form-label">身份证</label>
            <div class="layui-input-block">
                <input type="text" name="idcard" id="idcard" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required|identity">
            </div>
        </div>
    
    
        <!--邮箱-->
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" id="email" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required|email">
            </div>
        </div>
    
    
    
        <!--提交事件:submit-->
        <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>
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['form'],function () {
            //获取form模块
            var form = layui.form;
            //获取js
            var $ = layui.jquery;
    
    
    
    
            /**表单校验**/
            //自定义校验规则
            form.verify({
                //我们既支持上述函数式的方式,也支持下述数组的形式
                //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
                pass: [
                    /^[\S]{6,12}$/
                    ,'密码必须6到12位,且不能出现空格'
                ]
            });
    
        })
    </script>
    </body>
    </html>
    
    

    在这里插入图片描述
    下面是内置的校验规则
    在这里插入图片描述

    注意,表单校验除了可以用自带的校验规则之外,还可以自定义校验规则,具体操作看上面的代码

    十三、弹出层

    弹出层也是一个应该掌握的一个重要的模块,layui提供了很多种形式的弹出层,这里我将这些分成两类,一个是简单的窗口弹出,另一种是复杂的弹出层,先给出官网,建议去官网看看。

    (1)简单的弹出层

    注意:弹出层的使用需要引入layer模块

    在这里插入图片描述
    就跟上面图中的一样,共有7种弹窗,上诉代码中几乎把这7种弹窗的属性都写在了上面,实际如果用到的话可以直接去官网查看相应的参数即可,下面简单描述一下这7种弹窗。

    alert

    这个是最简单的一种,直接上代码

    <button type="button" class="layui-btn" id="btn1">alert</button>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['layer'],function () {
            let layer = layui.layer;
            let $ = layui.jquery;
    
    
            $('#btn1').on('click',function () {
                //正常提示
                // layer.alert("只想简单的提示");
    
                // 有图标的提示,icon取值1:7,具体可以看官网
                layer.alert('加了个图标', {icon: 1});
    
                // //提示点击确定后有回调方法
                // layer.alert('有了回调',{icon: 1}, function(index){
                //     //do something
                //     alert("回调方法:"+index);
                //     layer.close(index);
                // });
            });
    </script>
    

    在这里插入图片描述

    还可以设置点击确定后的回调事件。

    confirm

    这个用于需要用户判断是与否的情况,比如是否删除该用户等

    <button type="button" class="layui-btn" id="btn2">confirm</button>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['layer'],function () {
            let layer = layui.layer;
            let $ = layui.jquery;
    
    
            $('#btn2').on('click',function () {
                // //例子1,icon取值可以看官网,1到7
                layer.confirm('确定删除??', {icon: 3, title:'提示'}, function(index){
                    //do something
                    layer.close(index);
                });
    
                //例子2
                // layer.confirm('is not?', function(index){
                //     //do something
                //
                //     layer.close(index);
                // });
            });
    </script>
    

    在这里插入图片描述

    prompt

    <button type="button" class="layui-btn" id="btn3">prompt</button>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['layer'],function () {
            let layer = layui.layer;
            let $ = layui.jquery;
    
            $('#btn3').on('click',function () {
                // //prompt层新定制的成员如下
                // {
                //     formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)
                //         value: '', //初始时的值,默认空字符
                //     maxlength: 140, //可输入文本的最大长度,默认500
                // }
    
                // 例子1
                layer.prompt(function(value, index, elem){
                    alert(value); //得到value
                    layer.close(index);
                });
    
                // // //例子2
                // layer.prompt({
                //     formType: 2,
                //     value: '初始值',
                //     title: '请输入值',
                //     area: ['800px', '350px'] //自定义文本域宽高
                // }, function(value, index, elem){
                //     alert(value); //得到value
                //     layer.close(index);
                // });
            });
    </script>
    

    在这里插入图片描述

    这种可以自定义宽高等参数

    tab

    这种个人觉得用得比较少,可以了解一下

    <button type="button" class="layui-btn" id="btn4">tab</button>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['layer'],function () {
            let layer = layui.layer;
            let $ = layui.jquery;
    
            $('#btn4').on('click',function () {
                layer.tab({
                    area: ['600px', '300px'],
                    tab: [{
                        title: 'TAB1',
                        content: '内容1'
                    }, {
                        title: 'TAB2',
                        content: '内容2'
                    }, {
                        title: 'TAB3',
                        content: '内容3'
                    }]
                });
            });
    </script>
    

    在这里插入图片描述

    photos

    这个是图片的查看,也是常见的内容,这里它的使用有点特殊,这里用到json进行图片的信息的存储,json格式如下:

    {
      "title": "", //相册标题
      "id": 123, //相册id
      "start": 0, //初始显示的图片序号,默认0
      "data": [   //相册包含的图片,数组格式
        {
          "alt": "图片名",
          "pid": 666, //图片id
          "src": "", //原图地址
          "thumb": "" //缩略图地址
        }
      ]
    }
    

    使用get或post等请求获取得到这样的json数据,然后进行渲染

    <button type="button" class="layui-btn" id="btn5">photos</button>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['layer'],function () {
            let layer = layui.layer;
            let $ = layui.jquery;
    
            $('#btn5').on('click',function () {
                $.getJSON('json/imgs.json', function(json){
                    layer.photos({
                        photos: json
                        ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
                    });
                });
            });
    </script>
    

    在这里插入图片描述

    msg

    <button type="button" class="layui-btn" id="btn6">msg</button>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['layer'],function () {
            let layer = layui.layer;
            let $ = layui.jquery;
    
            $("#btn6").on('click',function () {
                //eg1
                //layer.msg('只想弱弱提示');
    
                // //eg2
                //layer.msg('有表情地提示', {icon: 6});
                // //eg3
                // layer.msg('关闭后想做些什么', function(){
                //     //do something
                // });
                // //eg
                layer.msg('同上', {
                    icon: 1,
                    time: 2000 //2秒关闭(如果不配置,默认是3秒)
                }, function(){
                    alert("你好啊")
                    //do something
                });
            });
    </script>
    

    在这里插入图片描述

    tips

    <button type="button" class="layui-btn" id="btn7">tips</button>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['layer'],function () {
            let layer = layui.layer;
            let $ = layui.jquery;
    
            $('#btn7').on('click',function () {
                //eg1
                //layer.tips('只想提示地精准些', '#btn7');
    
                // //eg 2
                // var that = this;
                // layer.tips('只想提示地精准些', that); //在元素的事件回调体中,follow直接赋予this即可
    
                // //eg 3
                layer.tips('在上面', '#btn6', {
                    tips: 1
                });
            });
    </script>
    

    在这里插入图片描述
    这个可以根据id将提示加到某一个元素上面

    上述的所有弹窗都可以在官网找到,而且官网上有详细的参数说明,使用的时候建议根据官网参数进行设置

    (2)复杂的弹窗层

    这个主要用到的语法是

    layer.open({type: 1});
    //注意open里面有很多的参数可以设置,用来构成一个复杂弹窗
    

    这里先把整体的代码抛出来,然后下面会有详细的讲解

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    
    <button type="button" class="layui-btn" id="btn0">type=0</button>
    <button type="button" class="layui-btn" id="btn1">type=1</button>
    <button type="button" class="layui-btn" id="btn2">type=2</button>
    <button type="button" class="layui-btn" id="btn3">type=3</button>
    <button type="button" class="layui-btn" id="btn4">type=4</button>
    
    <div id="test1" hidden>
        <!--事件监听-->
        <form class="layui-form" lay-filter="test2"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
    
            <!--监听下拉框:select-->
            <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>
                        <option value="2">游戏</option>
                        <option value="3">睡觉</option>
                    </select>
                </div>
            </div>
    
            <!--监听复选框:checkbox-->
            <div class="layui-form-item">
                <label class="layui-form-label">复选框</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" value="写作" title="写作" lay-filter="fxk">
                    <input type="checkbox" name="like[read]" value="阅读" title="阅读" lay-filter="fxk">
                </div>
            </div>
    
            <!--监听开关:switch-->
            <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" checked lay-skin="switch" value="开关的值" lay-text="开|关" lay-filter="kg">
                </div>
            </div>
    
            <!--监听单选框:radio     -->
            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="0" title="" lay-filter="sex">
                    <input type="radio" name="sex" value="1" title="" checked lay-filter="sex">
                </div>
            </div>
    
            <!--监听提交事件:submit-->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="tj">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
        </form>
    
    </div>
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['layer', 'form'], function () {
            let layer = layui.layer;
            let form = layui.form;
            let $ = layui.jquery;
    
            /**type=0**/
            $('#btn0').on('click', function () {
                //正常提示
                layer.open({
                    type: 0,//类型,0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
                    content: "<h2 style='color: red'>123</h2>",//可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同
                    // skin: 'layui-layer-molv',//内置皮肤layui-layer-lan和layui-layer-molv
                    // area: ['500px', '300px'],//自定义宽高
                    icon: 1,//图标,只对type = 0有效
                    btn: ['按钮1', "按钮2", "按钮3"],//按钮以及按钮回调事件
                    yes: function (index, layero) {
                        //按钮【按钮一】的回调
                        layer.alert("按钮1");
                        // return true;
                    },
                    btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        layer.alert("按钮2");
                        //return false;// 开启该代码可禁止点击该按钮关闭
                    },
                    btn3: function (index, layero) {
                        //按钮【按钮三】的回调
                        layer.alert("按钮3");
                        //return false 开启该代码可禁止点击该按钮关闭
                    },
                    cancel: function () {
                        //右上角关闭回调
                        alert("弹窗已经关闭");
    
                        //return false 开启该代码可禁止点击该按钮关闭
                    },
                    btnAlign: 'c',//上面按钮居中,l:居左,r:居右,c:居中
                    closeBtn:2,//右上角的关闭图标:x,0:关闭,1或者2:开启
                    shade:0.3,//遮罩,数字表示透明度,1是全黑,0是关闭
                    id:1001,//该弹窗的唯一标志
                    //maxmin:1,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                    fixed:true,//即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可
                    scrollbar:true,//是否允许出现滚动条
                    maxWidth: "500px",//最大宽度,只有当area: 'auto'时,maxWidth的设定才有效。
                    maxHeight:"200px",//最大高度,只有当高度自适应时,maxHeight的设定才有效。
                    success: function(layero, index){//层弹出后的成功回调方法
                        alert("弹窗成功弹出");
                        console.log(layero, index);
                    }
                });
    
            });
    
            /**type=1**/
            $('#btn1').on('click', function () {
                layer.open({
                    type:1,
                    content:$('#test1') ,
                    area:["500px","300px"],
                    icon:2,
                    maxmin: true//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                });
            });
    
            /**type=2**/
            $('#btn2').on('click', function () {
                layer.open({
                    type:2,
                    content: "01_layui_icon.html",
                    maxmin: true//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                });
            });
    
            /**type=3**/
            $('#btn3').on('click', function () {
               layer.open({
                   type:3,
                   content:"加载中..."
               });
            });
    
            /**type=4**/
            $('#btn4').on('click', function () {
                layer.open({
                    type:4,
                    content: ['这是内容', '#btn4'] //数组第二项即吸附元素选择器或者DOM
                });
            });
    
        })
    </script>
    </body>
    </html>
    
    
    

    下面先简单说一下一些必要的参数

    type

    layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用*layer.open({type: 1})*方式调用,则type为必填项(信息框除外),默认0

    在这里插入图片描述

    title

    表示标题

    在这里插入图片描述

    content

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l5B58jWn-1603290581428)(C:\Users\24224\AppData\Roaming\Typora\typora-user-images\image-20201021222447185.png)]
    在这里插入图片描述
    框里面的就是对应的内容,不同的type对应不同的内容

    skin

    在这里插入图片描述
    在这里插入图片描述
    这是其中的一种样式

    are

    在这里插入图片描述
    在这里插入图片描述
    可以控制弹窗的区域大小

    icon

    在这里插入图片描述
    在这里插入图片描述

    btn

    在这里插入图片描述
    在这里插入图片描述

    btnAlign

    在这里插入图片描述

    shade

    在这里插入图片描述
    在这里插入图片描述

    scrollbar

    在这里插入图片描述

    success
    在这里插入图片描述

    参数类型说明示例值
    elemString/DOM指定原始 table 容器的选择器或 DOM,方法渲染方式必填"#demo"
    colsArray设置表头。值是一个二维数组。方法渲染方式必填详见表头参数
    url(等)-异步数据接口相关参数。其中 url 参数为必填项详见异步接口
    toolbarString/DOM/Boolean 开启表格头部工具栏区域,该参数支持四种类型值:
    • toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器
    • toolbar: '<div>xxx</div>' //直接传入工具栏模板字符
    • 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 开始,该参数也可以自动从 <table id="test"></table> 中的 id 参数中获取。
    test
    skin(等)-设定表格各种外观、尺寸等详见表格风格

    十四、表格数据(table)

    table模块绝对是一个要掌握的重点知识,这里用官网推荐的渲染方式(方法渲染)进行数据渲染,先来看一下简单的例子
    下面用到代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    <table id="demo" lay-filter="test1"></table>
    
    
    <script type="text/html" id="titleTpl">
        {{#  if(d.sex == '男'){ }}
        <a href="#" class="layui-table-link"></a>
        {{#  } else { }}
        <a href="#" class="layui-table-link"></a>
        {{#  } }}
    </script>
    
    
    <script type="text/html" id="tablebar1">
        <div class="layui-btn-container">
            <button type="button" class="layui-btn" id="getAll">导出</button>
            <button type="button" class="layui-btn">批量删除</button>
        </div>
    </script>
    
    <script type="text/html" id="tablebar2">
        <div class="layui-btn-container">
            <button type="button" class="layui-btn">编辑</button>
            <button type="button" class="layui-btn">删除</button>
        </div>
    </script>
    
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['table'], function () {
            let table = layui.table;
    
            /**表格数据渲染**/
            table.render({
                elem: "#demo",//对应的table的id
                height: 'full-200',//表示整个屏幕高度-200这样的高度
                defaultToolbar: ["filter","exports","print"],
                url: "json/data.json",//异步的数据接口
                toolbar:"#tablebar1",//
                limit:10,//每页显示的条数(默认:10)
                limits:[20,40,60,80,100],//每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
                page: true,//开启分页
                cols: [[ //表头
                    {type: 'checkbox', fixed: 'left'},
                    //field:对应json的数据字段,title:字段名,with:该字段的宽度,sort:开启排序,fixed:将列固定
                    {field: 'id', title: 'ID', width: '10%', sort: true, fixed: 'left'}
    
                    //edit:表格可编辑
                    , {field: 'username', title: '用户名', width: '10%', edit: true}
    
                    //templet的三种使用方法
                    , {field: 'score', title: '评分', width: '10%', sort: true, templet:function(d){  return d.score >= '50'?'牛逼':'垃圾'; }}
                    , {field: 'experience', title: '积分', width: '10%', sort: true,templet: '<div><a href="#" class="layui-table-link">积分:{{d.experience}}</a></div>'}
                    , {field: 'sex', title: '性别', width: '10%', sort: true,templet: '#titleTpl'}
    
                    //hide:将该列隐藏
                    , {field: 'wealth', title: '财富', width: 135, sort: true, hide: true}
    
                    , {field: 'city', title: '城市', width: '10%'}
                    , {field: 'sign', title: '签名', width: '10%'}
                    , {field: 'classify', title: '职业', width: '20%'}
    
                    //toolbar
                    , {fixed: 'right', title: '操作', width: 190, align: 'left', toolbar: '#tablebar2'}
    
                ]]
    
            });
    
    
    
        });
    </script>
    </body>
    </html>
    
    

    (1)基本使用

    首先需要准备一个数据接口,这里用json文件模拟一个数据接口,json格式如下:

    {
      "code":0,
      "msg":"",
      "count":1000,
      "data":[
        {
          "id":10000,
          "username":"user-0",
          "sex":"女",
          "city":"城市-0",
          "sign":"签名-0",
          "experience":255,
          "logins":24,
          "wealth":82830700,
          "classify":"作家",
          "score":57
        },
        {
          "id":10001,
          "username":"user-1",
          "sex":"男",
          "city":"城市-1",
          "sign":"签名-1",
          "experience":884,
          "logins":58,
          "wealth":64928690,
          "classify":"词人",
          "score":27
        },
        {
          "id":10002,
          "username":"user-2",
          "sex":"女",
          "city":"城市-2",
          "sign":"签名-2",
          "experience":650,
          "logins":77,
          "wealth":6298078,
          "classify":"酱油",
          "score":31
        },
        {
          "id":10003,
          "username":"user-3",
          "sex":"女",
          "city":"城市-3",
          "sign":"签名-3",
          "experience":362,
          "logins":157,
          "wealth":37117017,
          "classify":"诗人",
          "score":68
        },
        {
          "id":10004,
          "username":"user-4",
          "sex":"男",
          "city":"城市-4",
          "sign":"签名-4",
          "experience":807,
          "logins":51,
          "wealth":76263262,
          "classify":"作家",
          "score":6
        },
        {
          "id":10005,
          "username":"user-5",
          "sex":"女",
          "city":"城市-5",
          "sign":"签名-5",
          "experience":173,
          "logins":68,
          "wealth":60344147,
          "classify":"作家",
          "score":87
        },
        {
          "id":10006,
          "username":"user-6",
          "sex":"女",
          "city":"城市-6",
          "sign":"签名-6",
          "experience":982,
          "logins":37,
          "wealth":57768166,
          "classify":"作家",
          "score":34
        },
        {
          "id":10007,
          "username":"user-7",
          "sex":"男",
          "city":"城市-7",
          "sign":"签名-7",
          "experience":727,
          "logins":150,
          "wealth":82030578,
          "classify":"作家",
          "score":28
        },
        {
          "id":10008,
          "username":"user-8",
          "sex":"男",
          "city":"城市-8",
          "sign":"签名-8",
          "experience":951,
          "logins":133,
          "wealth":16503371,
          "classify":"词人",
          "score":14
        },
        {
          "id":10009,
          "username":"user-9",
          "sex":"女",
          "city":"城市-9",
          "sign":"签名-9",
          "experience":484,
          "logins":25,
          "wealth":86801934,
          "classify":"词人",
          "score":75
        },
        {
          "id":10010,
          "username":"user-10",
          "sex":"女",
          "city":"城市-10",
          "sign":"签名-10",
          "experience":1016,
          "logins":182,
          "wealth":71294671,
          "classify":"诗人",
          "score":34
        },
        {
          "id":10011,
          "username":"user-11",
          "sex":"女",
          "city":"城市-11",
          "sign":"签名-11",
          "experience":492,
          "logins":107,
          "wealth":8062783,
          "classify":"诗人",
          "score":6
        },
        {
          "id":10012,
          "username":"user-12",
          "sex":"女",
          "city":"城市-12",
          "sign":"签名-12",
          "experience":106,
          "logins":176,
          "wealth":42622704,
          "classify":"词人",
          "score":54
        },
        {
          "id":10013,
          "username":"user-13",
          "sex":"男",
          "city":"城市-13",
          "sign":"签名-13",
          "experience":1047,
          "logins":94,
          "wealth":59508583,
          "classify":"诗人",
          "score":63
        },
        {
          "id":10014,
          "username":"user-14",
          "sex":"男",
          "city":"城市-14",
          "sign":"签名-14",
          "experience":873,
          "logins":116,
          "wealth":72549912,
          "classify":"词人",
          "score":8
        },
        {
          "id":10015,
          "username":"user-15",
          "sex":"女",
          "city":"城市-15",
          "sign":"签名-15",
          "experience":1068,
          "logins":27,
          "wealth":52737025,
          "classify":"作家",
          "score":28
        },
        {
          "id":10016,
          "username":"user-16",
          "sex":"女",
          "city":"城市-16",
          "sign":"签名-16",
          "experience":862,
          "logins":168,
          "wealth":37069775,
          "classify":"酱油",
          "score":86
        },
        {
          "id":10017,
          "username":"user-17",
          "sex":"女",
          "city":"城市-17",
          "sign":"签名-17",
          "experience":1060,
          "logins":187,
          "wealth":66099525,
          "classify":"作家",
          "score":69
        },
        {
          "id":10018,
          "username":"user-18",
          "sex":"女",
          "city":"城市-18",
          "sign":"签名-18",
          "experience":866,
          "logins":88,
          "wealth":81722326,
          "classify":"词人",
          "score":74
        },
        {
          "id":10019,
          "username":"user-19",
          "sex":"女",
          "city":"城市-19",
          "sign":"签名-19",
          "experience":682,
          "logins":106,
          "wealth":68647362,
          "classify":"词人",
          "score":51
        },
        {
          "id":10020,
          "username":"user-20",
          "sex":"男",
          "city":"城市-20",
          "sign":"签名-20",
          "experience":770,
          "logins":24,
          "wealth":92420248,
          "classify":"诗人",
          "score":87
        },
        {
          "id":10021,
          "username":"user-21",
          "sex":"男",
          "city":"城市-21",
          "sign":"签名-21",
          "experience":184,
          "logins":131,
          "wealth":71566045,
          "classify":"词人",
          "score":99
        },
        {
          "id":10022,
          "username":"user-22",
          "sex":"男",
          "city":"城市-22",
          "sign":"签名-22",
          "experience":739,
          "logins":152,
          "wealth":60907929,
          "classify":"作家",
          "score":18
        }
      ]
    }
    
    

    在这里插入图片描述

    注意:cols里面的field对应json返回的数据字段,效果如下

    在这里插入图片描述

    首先是table模块里面可以设置的字段

    参数类型说明示例值
    elemString/DOM指定原始 table 容器的选择器或 DOM,方法渲染方式必填"#demo"
    colsArray设置表头。值是一个二维数组。方法渲染方式必填详见表头参数
    url(等)-异步数据接口相关参数。其中 url 参数为必填项详见异步接口
    toolbarString/DOM/Boolean 开启表格头部工具栏区域,该参数支持四种类型值:
    • toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器
    • toolbar: '<div>xxx</div>' //直接传入工具栏模板字符
    • 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 开始,该参数也可以自动从 <table id="test"></table> 中的 id 参数中获取。
    test
    skin(等)-设定表格各种外观、尺寸等详见表格风格

    一些简单的这里就部介绍了,这里主要介绍一些重点的字段

    elem

    这个是对应table的id,作为唯一标识

    url

    这个是数据接口,接口返回json数据,通过异步请求的方式,先加载页面,页面加载完之后,它会自己像这个异步接口发送请求,获取数据,返回的数据格式上面已经有说明,进行表格是数据渲染,具体可以去看看,或者直接去官网看看。

    toolbar

    开启表格头部工具栏区域,该参数支持四种类型值:

    • toolbar: ‘#tablebar1’ //指向自定义工具栏模板选择器
    • toolbar: ‘< div>xxx< /div>’ //直接传入工具栏模板字符
    • toolbar: true //仅开启工具栏,不显示左侧模板
    • toolbar: ‘default’ //让工具栏左侧显示默认的内置模板

    这里主要用第一种类型值,首先需要一个id名为tablebar1的元素

    <script type="text/html" id="tablebar1">
        <div class="layui-btn-container">
            <button type="button" class="layui-btn">导出</button>
            <button type="button" class="layui-btn">批量删除</button>
        </div>
    </script>
    

    在这里插入图片描述

    在这里插入图片描述

    defaultToolbar

    在这里插入图片描述

    page

    在这里插入图片描述

    limit和limits

    在这里插入图片描述

    cols

    这个用来设置表格的数据,是核心的一个字段,该字段官网也是直接给了一个详细的表头说明.

    一些简单的这里就不介绍了,下面介绍一些比较常用而且复杂的字段

    参数类型说明示例值
    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
    totalRow Boolean/Object

    是否开启该列的自动合计功能,默认:false。

    当开启时,则默认由前端自动合计当前行数据。从 layui 2.5.6 开始: 若接口直接返回了合计行数据,则优先读取接口合计行数据,格式如下:

    codelayui.code

    1. {
    2. "code": 0,
    3. "msg": "",
    4. "count": 1000,
    5. "data": [{}, {}]
    6. "totalRow": {
    7. "score": "666"
    8. ,"experience": "999"
    9. }
    10. }

    如上,在 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绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮详见行工具事件

    sort

    排序

    在这里插入图片描述

    点击上面的图标进行正序或者倒序排序

    templet

    templet 提供了三种使用方式,请结合实际场景选择最合适的一种:

    • 如果自定义模版的字符量太大,我们推荐你采用【方式一】;
    • 如果自定义模板的字符量适中,或者想更方便地调用外部方法,我们推荐你采用【方式二】;
    • 如果自定义模板的字符量很小,我们推荐你采用【方式三】

    这个是很重要的一个功能,它的官网给了3种用法,这里全列出来了

    在这里插入图片描述

    图中第3种使用方式需要一个名为titleTpl的元素

    在这里插入图片描述

    toolbar

    这个的用法跟上面的toolbar用法一样
    在这里插入图片描述

    在这里插入图片描述

    (2)监听事件及基础方法

    下面可能用到的代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
        <title>Title</title>
    
        <!--引入layui.css-->
        <link rel="stylesheet" href="../../static/layui/css/layui.css">
    
    </head>
    <body>
    
    <table id="demo" lay-filter="test1"></table>
    
    
    <script type="text/html" id="tablebar1">
        <div class="layui-btn-container">
            <button type="button" class="layui-btn" id="getAll" lay-event="getAll">获取选中行</button>
            <button type="button" class="layui-btn" id="delAll" lay-event="dellAll">批量删除</button>
        </div>
    </script>
    
    <script type="text/html" id="tablebar2">
        <div class="layui-btn-container">
            <button type="button" class="layui-btn" lay-event="detail">查看</button>
            <button type="button" class="layui-btn" lay-event="edit">编辑</button>
            <button type="button" class="layui-btn" lay-event="del">删除</button>
        </div>
    </script>
    
    
    
    <!--引入layui.js-->
    <script src="../../static/layui/layui.js"></script>
    <script>
        layui.use(['table','layer'], function () {
            let table = layui.table;
            let $ = layui.jquery;
    
    
            /**监听头工具栏事件**/
            table.on("toolbar(test1)", function(obj){
                let checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getAll':
                        alert("getAll");
    
                        if(checkStatus.data.length != 0){
                            let dataJson = JSON.stringify(checkStatus.data);
                            alert(dataJson);
                            console.log(checkStatus.data[0].username);//获取选中行的数据
                            console.log(checkStatus.data);//获取选中行的数据
                            console.log(checkStatus.data.length);//获取选中行数量,可作为是否有选中行的条件
                            console.log(checkStatus.isAll );//表格是否全选
                        }else{
                            layer.tips('请先选择数据行', '#getAll');
                        }
    
                        break;
                    case 'dellAll':
                        alert("dellAll");
                        break;
                };
            });
    
            /**监听单元格工具条**/
            table.on('tool(test1)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
                let data = obj.data; //获得当前行数据
                let layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
                let tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
                switch (layEvent) {
                    case 'detail':
                        alert("查看");
                        break;
                    case 'del':
                        alert("删除");
                        layer.confirm('真的删除行么', function(index){
                            obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                            layer.close(index); //向服务端发送删除指令
                        });
                        break;
                    case'edit':
                        alert("编辑");
                        obj.update({//同步更新缓存对应的值
                            id:"更新后的id"
                            ,username: '更新后的username'
                            ,score: '更新后的评分'
                            ,experience:'更新后的积分'
                            ,sex:'更新后的性别'
                            ,wealth:'更新后的财富'
                            ,city:'更新后的城市'
                            ,sign:'更新后的签名'
                            ,classify:'更新后的职业'
                        });
                        break;
                }
            });
    
            /**监听复选框选择**/
            table.on('checkbox(test1)', function(obj){
                alert(obj.checked);
                console.log(obj.checked); //当前是否选中状态
                console.log(obj.data); //选中行的相关数据
                console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
            });
    
            /**监听单元格编辑**/
            table.on('edit(test1)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-filter="对应的值"
                alert(obj.field);
                console.log(obj.value); //得到修改后的值
                console.log(obj.field); //当前编辑的字段名
                console.log(obj.data); //所在行的所有相关数据
            });
    
            /**监听排序事件**/
            table.on('sort(test1)', function(obj){ //注:sort 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
                alert(obj.field);
                console.log(obj.field); //当前排序的字段名
                console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
                console.log(this); //当前排序的 th 对象
    
                //尽管我们的 table 自带排序功能,但并没有请求服务端。
                //有些时候,你可能需要根据当前排序的字段,重新向服务端发送请求,从而实现服务端排序,如:
                table.reload('idTest', {
                    initSort: obj //记录初始排序,如果不设的话,将无法标记表头的排序状态。
                    ,where: { //请求参数(注意:这里面的参数可任意定义,并非下面固定的格式)
                        field: obj.field //排序字段
                        ,order: obj.type //排序方式
                    }
                });
    
                layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
            });
    
            /**表格数据渲染**/
            table.render({
                id:'testDemo',//唯一id
                elem: "#demo",//对应的table的id
                height: 'full-200',//表示整个屏幕高度-200这样的高度
                defaultToolbar: ["filter","exports","print"],
                url: "json/data.json",//异步的数据接口
                toolbar:"#tablebar1",//
                limit:10,//每页显示的条数(默认:10)
                limits:[20,40,60,80,100],//每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
                page: true,//开启分页
                cols: [[ //表头
                    {type: 'checkbox', fixed: 'left'},
                    //field:对应json的数据字段,title:字段名,with:该字段的宽度,sort:开启排序,fixed:将列固定
                    {field: 'id', title: 'ID', width: '10%', sort: true, fixed: 'left'}
    
                    //edit:表格可编辑
                    , {field: 'username', title: '用户名', width: '10%', edit: true}
                    , {field: 'score', title: '评分', width: '10%', sort: true}
                    , {field: 'experience', title: '积分', width: '10%', sort: true}
                    , {field: 'sex', title: '性别', width: '10%', sort: true}
    
                    //hide:将该列隐藏
                    , {field: 'wealth', title: '财富', width: 135, sort: true, hide: true}
    
                    , {field: 'city', title: '城市', width: '10%'}
                    , {field: 'sign', title: '签名', width: '10%'}
                    , {field: 'classify', title: '职业', width: '20%'}
    
                    //toolbar
                    , {fixed: 'right', title: '操作', width: 190, align: 'left', toolbar: '#tablebar2'}
    
                ]]
    
            });
        });
    </script>
    </body>
    </html>
    
    

    监听头工具栏事件

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ApSZm1M7-1603431888045)(C:\Users\24224\AppData\Roaming\Typora\typora-user-images\image-20201023132416284.png)]

    在这里插入图片描述
    在这里插入图片描述

    监听单元格工具条

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    监听复选框选择

    在这里插入图片描述

    监听单元格编辑

    在这里插入图片描述

    监听排序事件

    在这里插入图片描述

    展开全文
  • layui学习总结

    2021-01-10 14:54:07
    layui layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,开箱即用。 layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与...

    layui

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,开箱即用

    layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。

    第三方支持:

    Layui部分模块依赖jQuery(比如layer),但是你并不用去额外加载jQuery。Layui已经将jQuery最稳定的一个版本改为Layui的内部模块,当你去使用 layer 之类的模块时,它会首先判断你的页面是否已经引入了jQuery,如果没有,则加载内部的jQuery模块,如果有,则不会加载。

    layui 的模块是基于 layui.js 内部实现的异步模块加载方式,它并不遵循于AMD,而是自己定义了一套更轻量的模块规范

    另外,我们的图标取材于阿里巴巴矢量图标库(iconfont),构建工具采用 Gulp 。除此之外,不依赖于任何第三方工具。

    引用:

    <link rel="stylesheet" href="./plugins/layui/css/layui.css"  type="text/css">   
    
    
    <!-- 可加自己的jquery --> 
    
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>	
    <script type="text/javascript" src="./plugins/layui/layui.js"></script>
    

    栅格布局

    所谓栅格布局,layui将页面的每一行默认分为12等分 ,根据不同终端设置不同样式。

    • 采用 layui-row 来定义行,如:<div class="layui-row"></div>
    • 列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。
    超小屏幕(xs)小屏幕(sm)中屏幕(md)超大屏幕(lg)
    手机屏幕 <768px平板屏幕 768px< width<992pxPC端 992px<width < 1200px投影 1200px<width
    layui-col-xs* (*表示1-12)layui-col-sm* (*表示1-12)layui-col-md* (*表示1-12)layui-col-lg* (*表示1-12)
    始终按设定的比例水平排列在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列

    图标

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

    通过对一个内联元素(一般推荐用 i标签)设定 class=“layui-icon”,来定义一个图标,然后对元素加上图标对应的 font-class(注意:layui 2.3.0 之前只支持采用 unicode 字符),即可显示出你想要的图标

    例如:

    <i class="layui-icon layui-icon-face-smile" ></i>   
    或者
    <i class="layui-icon">&#xe69c;</i> 
    

    按钮

    向任意HTML元素设定class=“layui-btn”,建立一个基础按钮。

    通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格

    主题

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

    尺寸

    <button type="button" class="layui-btn  layui-btn-lg">大型按钮</button>
     <button type="button" class="layui-btn  ">默认按钮</button>
     <button type="button" class="layui-btn  layui-btn-sm">小型按钮</button>
     <button type="button" class="layui-btn  layui-btn-xs">迷你按钮</button>
    <button type="button" class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button>
    

    圆角

    <button type="button" class="layui-btn  layui-btn-radius layui-btn-primary">原始按钮</button>
    

    图标按钮

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

    按钮组

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

    数据表格

    创建一个table实例最简单的方式是,在页面放置一个元素 <table id="demo"></table>,然后通过 table.render() 方法指定该容器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <!--让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放。一都主流的web app都是这么设置的,它的作用其实是故意舍弃viewport,不缩放页面,这样dpi肯定和设备上的真实分辨率是一样的,不做任何缩放,网页会因此显得更高细腻。-->
        <!--width=device-width :表示bai宽度是设备du屏幕的宽度 initial-scale=1.0:表示初始的缩放比例 minimum-scale=0.5:-->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="layui/css/layui.css" media="all">
    </head>
    <body>
        <div class="layui-container">
                <table class="layui-hide" id="test"></table>
        </div>
        <script src="jquery-3.4.1.min.js"></script>
        <script src="layui/layui.all.js"></script>
    <script>
    
        //注意:导航 依赖 element 模块,否则无法进行功能性操作
        layui.use(['element','table'], function(){
            var element = layui.element;
            var table = layui.table;
    
            //展示已知数据
            table.render({
                elem: '#test'
                ,cols: [[ //标题栏
                    {field: 'id', title: 'ID', width: 80, sort: true}
                    ,{field: 'username', title: '用户名', width: 120}
                    ,{field: 'email', title: '邮箱', minWidth: 150}
                    ,{field: 'sign', title: '签名', minWidth: 160}
                    ,{field: 'sex', title: '性别', width: 80}
                    ,{field: 'city', title: '城市', width: 100}
                    ,{field: 'experience', title: '积分', width: 80, sort: true}
                ]]
                ,url:"./testServlet"
                ,skin: 'line' //表格风格
                ,even: true
                ,page: true //是否显示分页
                ,limits: [5, 7, 10]
                ,limit: 5 //每页默认显示的数量
            });
        });
    </script>
    </body>
    </html>
    

    弹出层

    layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务,在 Web 开发者的圈子里口口相传,乃至于成为今天的 layui 最强劲的源动力。目前,layer已成为国内最多人使用的 Web 弹层组件

    layer作为独立组件使用,你可以去layer独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js。且jquery的引入位置必须放到layer引入之前,否则无效。

    使用方式

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="layer/layer.js"></script>
    
    <script type="text/javascript">
    	layer.msg('hello');
    </script>
    

    属性:

    • type

      layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用*layer.open({type: 1})*方式调用,则type为必填项(信息框除外)

    • title

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

    • content

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

    • area

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

    • btn

      信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: ‘我知道了’,当你要定义两个按钮时,你可以btn: [‘yes’, ‘no’]。当然,你也可以定义更多按钮,比如:btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。

    • closeBtn

      layer提供了两种风格的关闭按钮,可通过配置12来展示,如果不显示,则closeBtn: 0

    • shade

      即弹层外区域。默认是0.3透明度的黑色背景(’#000’)。如果你想定义别的颜色,可以shade: [0.8, ‘#393D49’];如果你不想显示遮罩,可以shade: 0

    • shadeClose

      如果你的shade是存在的,那么你可以设定shadeClose来控制点击弹层外区域关闭。

    • time

      默认不会自动关闭。当你想自动关闭时,可以time: 5000,即代表5秒后自动关闭,注意单位是毫秒(1秒=1000毫秒)

    • layer.open(options)

      基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走layer.open(),创建任何类型的弹层都会返回一个当前层索引,上述的options即是基础参数

    • layer.alert(content, options, yes) - 普通信息框

      它的弹出似乎显得有些高调,一般用于对用户造成比较强烈的关注,类似系统alert,但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数,可以设定各种你所需要的基础参数,但如果你不需要的话,直接写回调即可。

    • layer.confirm(content, options, yes, cancel) - 询问框

      类似系统confirm,但却远胜confirm,另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的,它的参数也是自动补齐的。

    • layer.msg(content, options, end) - 提示框

      我们在源码中用了相对较大的篇幅来定制了这个msg,目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。因为它简单,而且足够得自觉,它不仅占据很少的面积,而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。因此我赋予了它许多可能在外形方面,它坚持简陋的变化,在作用方面,它坚持零用户操作。而且它的参数也是自动补齐的。

    • layer.load(icon, options) - 加载层

      type:3的深度定制。load并不需要你传太多的参数,但如果你不喜欢默认的加载风格,你还有选择空间。icon支持传入0-2如果是0,无需传。另外特别注意一点:load默认是不会自动关闭的,因为你一般会在ajax回调体中关闭它。

    • layer.close(index) - 关闭特定层

      关于它似乎没有太多介绍的必要,唯一让你疑惑的,可能就是这个index了吧。事实上它非常容易得到。

    表单

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

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

    事件监听

    语法:form.on('event(过滤器值)', callback);
    
    event描述
    select监听select下拉选择事件
    checkbox监听checkbox复选框勾选事件
    switch监听checkbox复选框开关事件
    radio监听radio单选框事件
    submit监听表单提交事件

    表单赋值 / 取值

    语法: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");
    

    第二个参数中的键值是表单元素对应的 namevalue

    展开全文
  • LayUI学习

    千次阅读 2018-01-02 17:03:29
    1.最近公司准备开发新的项目,准备采用layui做为前端的技术,所以紧急突击学习了这一类的知识,现在把相关的技术点整理整理。 2.LayUI说好也好,说不好也不好,我理解的是他是一个正在成长的框架技术,包括树结构和...

    1.最近公司准备开发新的项目,准备采用layui做为前端的技术,所以紧急突击学习了这一类的知识,现在把相关的技术点整理整理。

    2.LayUI说好也好,说不好也不好,我理解的是他是一个正在成长的框架技术,包括树结构和一些页面效果我觉得还是有欠缺的地方,算了,直接聊技术吧。

    3.本博客主要介绍layui的一些控件,页面效果,树结构,以及和后台的一个联动,在这些的基础上做出一个简易的增删查改,感觉还是有收获的。接下来就干货上车,大家拿走。

    4.首先是界面原型图,大家看上一看


    整体就是左右构造,在加上一些相应的功能。接下来说一下页面效果吧。

    5.页面布局

    说一下我觉得不好理解的东东吧(其实到后面就觉得都还好了~~~~)

    第一个我要吐槽一下layui


    就是不给你一个查询的按钮组,还要你自己去文档的上面慢慢找,,,无奈

    但是这个组件直接在上面加相应的点击事件就行了。


    这里要说一下,并不是用我们平常的input就可以把他们放在一行,而是要用layui的一个控件组,用它的话就可以将他们放在一行


    就是这么一个组件套餐,首先用第一个红线处包括生成一个div,其次用class="layui-inline"控件放到上一个div中,最后给定相应的宽度即可。

    页面控件上的东西我觉得还是要大家多学多用,我也很多都没怎么用过,只有自己踩过这些坑,你才懂别人跳进去的感受,接下来讲点真正的干货。

    我的页面上采用layui,后台是springboot+mybatis+redis+mysql 我就说一下前后端的结合使用。

    首先是查询,前台是layui的控件,直接采用文档中的自定义渲染进行查询即可。

    <table class="layui-table"
    						lay-data="{id: 'table1',height: 'full-110', cellMinWidth: 80, page: true, limit:10, url:'/emCompanyInfos/getCompanyInfoList'}">
    						<thead>
    							<tr>
    								<th lay-data="{type:'checkbox'}">序号</th>
    								<th lay-data="{field:'companyName', width:200, sort: true}">企业名称</th>
    								<th lay-data="{field:'companyThirdNo', width: 150}">第三方编号</th>
    								<th lay-data="{field:'companyId', width:150}">企业编号</th>
    								<th lay-data="{field:'authorizerName', width:150}">授权人姓名</th>
    								<th lay-data="{field:'authorizerTel', width:150}">授权人姓名</th>
    								<th lay-data="{field:'',}">运营管理员</th>
    								<th lay-data="{field:'',}">账户余额</th>
    								<th
    									lay-data="{field:'companyState',templet: '#rendererCompanyState'}">企业状态</th>
    								<th lay-data="{field:'payType',templet: '#rendererPayType'}">支付方式</th>
    								<th
    									lay-data="{field:'companyType', sort: true,align: 'right',templet: '#rendererCompanyType'}">企业属性</th>
    								<th
    									lay-data="{field:'createTime', width:200,sort: true,align: 'right'}">创建时间</th>
    							</tr>
    						</thead>
    					</table>

    在上图中我们可以看到,直接在table中给出自己自定义的风格进行定义,在里面定义请求的url路径,table表格的宽度,page分页的相关属性等等

    接下来说一下修改和增加吧,这两个其实是一类的,都是实现相应的弹出层,一个带参数,一个不带参数,我就直接说修改吧。

    修改,怎么说呢,在前端就是姚获取你选中的当前行,然后把选中行的数据进行存储,在修改页面进行克隆显示即可,实话,由于官方文档不是那么友好,我着实头疼了很久。

    function toUpdate() {
    				var checkStatus = table.checkStatus('table1');
    				var datas = checkStatus.data;
    				var length = checkStatus.data.length;
    				if (length != 1) {
    					layer.alert("请选择一行数据");
    				} else {
    					layer.open({
    								type : 2 //此处以iframe举例
    								,
    								title : '修改企业信息',
    								area : [ '700px', '660px' ],
    								shade : 0,
    								maxmin : true,
    								content : 'updateEmCompanyInfo.html',
    								success : function(layero, index) {
    									var body = layer.getChildFrame('body',
    											index);
    									var iframeWin = window[layero
    											.find('iframe')[0]['name']];
    									iframeWin.setData(datas[0]);
    									//iframeWin.setData2(tree);
    								},
    								end : function() {
    									location.reload();
    								}
    							});
    				}

    前三行,就是这里面的关键代码,获取当前行的数据。这个时候你可以打印输出一下,请记住,这里不是简单的alert弹窗,更不是什么layer.alert,这些没用,因为datas里面是json数据,所以你要进行解析。

    layer.alert(JSON.stringify(datas));
    返回成功,呵呵,代表你已经拿到你想要拿到的值,接下来去页面克隆取值即可,这一点我在关于miniui的博客上有过详细介绍:http://blog.csdn.net/t_james/article/details/78604018

    可以看到,只要理解了上述的三行代码,你会发现就没有难点了。

    这里我要说一下模糊查询和条件查询,因为一开始我这边不允许用外键,所以导致我用的是左连接查询,然而lz并没怎么接触这个,所以sql写的费劲,不要说很简单啥的,lz只能说,lz做过之后才知道很简单。。

    <if test="params.empName != null and params.empName != ''">
    						and empName like
    						concat(concat('%',#{params.empName}),'%')
    					</if>
    					<if test="params.empTel != null and params.empTel != ''">
    						and empTel like concat(concat('%',#{params.empTel}),'%')
    					</if>

    另外很想说,左外连接一定要确定主表,其次你的多个左外连接只用用空格隔开就行了。
    <select id="getManyList" resultMap="emempinfo">
    		SELECT
    		su.username,
    		emi.companyId,
    		emi.companyName,
    		emi.parentId,
    		eei.empName,
    		eei.empTel,
    		eei.empEmail,
    		eei.allotQuota,
    		eei.appVersion,
    		eei.systemVersion,
    		eei.systemType,
    		eei.createTime,
    		eei.empState
    		FROM
    		em_emp_info AS eei
    		LEFT JOIN sys_user AS su ON eei.userId = su.id
    		LEFT JOIN em_company_info AS emi ON eei.companyId = emi.companyId
    		<include refid="where" />
    		limit #{pageStart}, #{pageSize}
    	</select>

    看来只有自身强大,才能统御代码。。

    我能说这里才是干货么,,因为我觉得这里最重要,下面我写的是啥------树,兴奋不!!我并不兴奋。

    根据官方文档的介绍,我这边写了一个Tree的实体,其次在这里写一个工具类,但是我的数据库需求有一个缺陷,相关的字段上面用的不是固定的id和字符串,所以用不了递归,虽然我也不是很知道递归,哈哈,然后写了一个扩展性不好的工具类。

    public Object getComPany(List<EmCompanyInfo> list){
    		JSONObject jsonObject = new JSONObject();
    		List<Tree> code2 = new ArrayList<>();
    		List code3 = new ArrayList<>();
    			for(int i = 0; i<list.size();i++){
    
    				EmCompanyInfo emCompanyInfo = list.get(i);
    				
    				String emCompanyCode = emCompanyInfo.getCompanyId();
    				
    				if (emCompanyCode.length()==8) {   //如果区域代码长度为11则代表为父级区域
    					
    					Tree tree = new Tree();
    					tree.setName(emCompanyInfo.getCompanyName());
    					
    					tree.setId(emCompanyCode);
    					
    					List<Tree> code = new ArrayList<>();
    					for(int z = 0; z<list.size();z++){
    						
    						EmCompanyInfo emCompanyInfo2 = list.get(z);
    
    						String emCompanyCode2 = emCompanyInfo2.getParentId();
    							if(emCompanyCode2.equals(emCompanyCode)){  //判断取出的父级id和之前的id是否匹配
    
    								//System.out.println(RegionCode2+""+RegionCode+""+emRegionInfo2.getRegionCode());
    								Tree tree2 = new Tree();
    								tree2.setName(emCompanyInfo2.getCompanyName());
    								tree2.setId(emCompanyInfo2.getCompanyId());
    								code.add(tree2);
    							}
    							
    					};
    						tree.setChildren(code);
    						code2.add(tree);
    				}
    			}
    		jsonObject.put("name", "公司树根节点");//设置根节点名称
    		jsonObject.put("spread", "true");   //设置展开状态
    		jsonObject.put("id","com_");
    		jsonObject.put("children",code2);   //子节点
    		code3.add(jsonObject);       //将你的设置最后装载到集合中
    		return code3;    //返回一个code3
    	}
    因为我只是两层嵌套,所以只是有两个循环,如果是要做成省市县三级级联的效果的话,那就要再套一层,我说的可扩展性不强是在哪里呢,就是第一个if里面所谓的区域代码长度那里,我根据相应的数据库字段长度进行匹配父级机构,这就很难受了。

    public Object getManyList(PageTableRequest request){
            Map<String,Object> requestParams =request.getParams();
            int pageSize = Integer.parseInt(requestParams.get("limit").toString());//分页参数
            int pageStart = (Integer.parseInt(requestParams.get("page").toString())-1)*pageSize;//分页起始数据
            Object paramsStr = requestParams.get("paramsStr");
            Map<String,Object> params = null;//查询参数
            if(paramsStr!=null){
                params = JSONObject.parseObject(paramsStr.toString(), Map.class);
            }
            int count = emEmpInfoDao.count(params);
            List<EmEmpInfo> list = emEmpInfoDao.getManyList(params,pageStart,pageSize);
            JSONObject reData = new JSONObject();
            JSONArray datas = new JSONArray();
            for (int i = 0; i < list.size(); i++) {
                EmEmpInfo emEmpInfo = list.get(i);
                datas.add(JSONObject.toJSON(emEmpInfo));
            }
            reData.put("code",0);
            reData.put("msg","");
            reData.put("count",count);
            reData.put("data",datas);
            //System.out.print(reData.toJSONString());
            return reData;
        }

    public Object getManyList(){
        	EmEmpInfoTreeUtil treeUtil = new EmEmpInfoTreeUtil();
        	List company = (List) treeUtil.getComPany(emCompanyInfoDao.getManyList());
        	JSONObject map = new JSONObject();
        	map.put("nodes", company);     //设置节点数据
        	map.put("elem", "#Tree");    //指定元素的选择器
        	map.put("click","function(item){layer.msg('admin');console.log(item);}");
    		return company;
        }

    这里就是controller里面的逻辑代码,怎么说呢,通过获取公司里面的数据,进入树形结构里面的工具类里面进行遍历,最后显示输出,最下方的是一个点击map进行左右联动,显示相应的树形结构信息。

    页面只用和官方文档一样给一个ul li即可,里面加上id即可。

    接下来就是给一点js事件,代表页面加载即执行的方法。

    window.onload = function() {
    				getTree();
    			}
    			function getTree() {
    				$.ajax({
    					type : "GET",
    					url : "/emCompanyInfos/getManyList",
    					success : function(data) {
    						layui.tree({
    							elem : '#Tree',
    							nodes : data,
    							click : function(item) {
    								console.log(item);
    								tree = item.name;
    								//layer.alert(tree);
    								var paramsStr = '{"companyId":"' + item.id
    										+ '"}';
    								table.reload('table1', {
    									page : {
    										curr : 1
    									},
    									where : {
    										paramsStr : paramsStr
    									}
    								});
    							}
    						});
    					}
    				});
    			}
    这个是树形结构显示和左右联动的总结性质的代码,所以有点繁琐。大致就是页面加载即调用相应的url,然后查询出相应的树形结构信息显示即可。点击相应的树形节点即可进行左右联动,关键代码就是查询时进行数据后面的模糊查询,在工具类里面进行判断一下前缀即可。

    大致就是这样,希望和大家可以相互交流一下。






    展开全文
  • Layui学习

    2020-12-14 09:04:08
    Layui是一个前端框架,主要学习如何使用框架即有的功能来快速开发我们的系统。Layui是一个功能很强大的前端框架,有专业的样式,有强大的交互功能,通过官网的API和实例的学习,可以很轻松的开发出专业的前端页面。 ...

    Layui学什么

    Layui是一个前端框架,主要学习如何使用框架即有的功能来快速开发我们的系统。Layui是一个功能很强大的前端框架,有专业的样式,有强大的交互功能,通过官网的API和实例的学习,可以很轻松的开发出专业的前端页面。
    对于信息管理项目,重点学习form表单和表格两大块,form表单中的校验功能比较重要,表格中学习如何设置表格样式、数据列的指定和各按钮的事件。

    展开全文
  • <!DOCTYPE html> <... <head> ...meta charset="utf-8">...layui导航学习</title> <!-- 新 layui 核心 CSS 文件 --> <link rel="stylesheet" href="layuiadmin...
  • LayUI学习资料.zip

    2021-08-21 00:39:27
    本人在b站学习LayUi的代码+笔记
  • Layui学习之layui 的基本使用介绍 1、Layui学习第一步之下载工具Layui下载地址 2、解压文件到电脑中的某一目录下。下载下来的文件结构如下: ├─css //css目录 │ │─modules //模块css目录(一般如果模块相对...
  • layui学习资料汇总

    千次阅读 2018-12-26 16:53:47
    后台管理模板: https://www.cnblogs.com/best/p/9150271.html   只有菜单,没有table https://gitee.com/981764793/PyFly   ...   权限树: ...https://github.com/wangerzi/layui-authtr...
  • 这是一个layui2.2.5官方离线文档,有演示以及各种实例源码,有需要的可以下载,其中还包含最新2.5.6版本文档
  • Layui学习笔记

    2018-11-06 20:19:16
    layui-form-label"&gt;&lt;/label&gt; &lt;div class="layui-input-block"&gt; &lt;input type="checkbox" name="search[logType]" value=
  • layui学习笔记

    2021-09-30 09:22:58
    body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header">头部</div> <div class="layui-side layui-bg-black">侧边栏</div...
  • layui学习

    2020-07-06 09:20:11
    弹窗后折叠面板无反应,重载面板 element.render('collapse');
  • layUI 学习记录

    2018-10-08 17:54:36
    <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">发送短信后台 <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧...
  • layUi学习笔记

    2019-04-10 17:42:00
    layui是前端框架 与组件的关系 layer是弹出层效果组件 layDate日期选择器组件 layIM 即时通信组件 layui 下载地址 (http://www.layui.com) layer的使用方法 lay是web弹层组件,下载地址http://layer.layui.com/ ...
  • layui学习笔记一

    2018-08-11 12:38:04
    <button class="layui-btn layui-btn-primary" id="sub" style="margin: 50px;">提交 不知道</span><br /> <button class="layui-btn" id="sub1" style="margin: 50px;">改变 我是谁</span><br /> ...
  • layui学习专栏目录-【持续更新】layui简介为什么使用layuilayui开始使用快速上手layui图标layui按钮layui导航栏layui选项卡结尾 专栏目录-【持续更新】 layui写后端模板经常用,我是写前端的,后端只是了解一下。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,342
精华内容 2,936
关键字:

layui学习

友情链接: APDG-v0.55.zip