layui

于 2021-12-11 18:19:06 发布
阅读量631 收藏 4
点赞数
文章标签： layui javascript 前端
原文链接：https://www.layuiweb.com/doc/index.htm
版权

1.layui的安装和使用

1.下载layui的jar包

Layui - 经典开源模块化前端 UI 框架（官方文档镜像站） (layuiweb.com)

2.解压jar包直接放在项目中

3.简单上手，实现页面出现弹窗

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>layui的使用</title>
        <!-- layui的核心cCSS文件!-->
        <link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css" />
        <!-- layui的核心Js文件 -->
        <script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
    </head>
    <body>
            <!-- 页面弹出hello world !-->
        <script>
        layui.use(['layer', 'form'], function(){
          var layer = layui.layer
          form = layui.form;  
          layer.msg('Hello World');
        });
        </script> 
    </body>
</html>

2.布局容器的使用

1.固定宽度（有留白）

 <div class="layui-container" style="background-color: #0000FF;height: 300px;">
             固定宽度            
         </div>

2完整宽度（全屏）

 <div class="layui-fluid" style="background-color: #0000FF;height: 300px;">
                     完整宽度            
         </div>

3.栅格系统

采用 layui-row 来定义行，如：<div class="layui-row"></div>

采用 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量md 代表的是不同屏幕下的标记 ; 变量*代表的是该列所占用的12等分数,如6/12,可选值为1-12 ; 如果多个列的“等分数值”总和等于12，则刚好满行排列,如果大于12，多余的列将自动另起一行

列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）

对列追加 layui-col-space5、 layui-col-md-offset3 预设类来定义列的间距和偏移

最后，在列（column）元素中放入自己的任意元素填充内容，完成布局

<!-- 
                栅格系统
                1定义列    layui-row           
                2定义行     layui-col-md*      
                    md表示不同的标识(xs,sm,md,lg)
                    *表示列的数量
                3每一行被均分为12份,列的总数不能超过12行,如果超过了自动换行
         -->
<!-- 定义布局容器 -->
        <div class="layui-container">
            <!-- 定义行 -->
            <div class="layui-row">
                <!-- 定义列 -->
                <div class="layui-col-md5" style="background-color: #0000FF;">
                        内容5/12
                </div>
                <div class="layui-col-md7" style="background-color: #00F7DE;">
                        内容7/12
                </div>
            </div>  
            <!-- 定义行 -->
            <div class="layui-row">
                <!-- 定义列 -->
                <div class="layui-col-md5" style="background-color: #5FB878;">
                        内容5/12
                </div>
                <div class="layui-col-md5" style="background-color: #000000;">
                        内容5/12
                </div>
                <div class="layui-col-md2" style="background-color: #009E94;">
                        内容2/12
                </div>
            </div>  
        </div>

1.响应式规则:栅格会自动根据分辨率选择对应的样式效果

    <h3>桌面端 平板的不同表现</h3>
    <div class="layui-row">
        <div class="layui-col-sm6 layui-col-md4" style="background-color: #00F7DE;">
            平板>=768px:6/12 桌面端>=992px:4/12          
        </div>
        <div class="layui-col-sm4 layui-col-md6" style="background-color: #00FF00;">
            平板>=768px:4/12 桌面端>=992px:6/12          
        </div>
        <div class="layui-col-sm12 layui-col-md8" style="background-color: #1E9FFF;">
            平板>=768px:12/12 桌面端>=992px:8/12         
        </div>  
    </div>

2.列边距

支持列之间为1px-30px之间的所有双数间隔，以及1px,5px,15px,25px之间的单数间隔

    <!--列边距：layui-col-space*（*表示px值1-30）!-->
    <h3>列边距</h3>
<div class="layui-row layui-col-space10">
            <div class="layui-col-md4 " >
                <div style="background-color: #00F7DE;">4</div>     
            </div>
            <div class="layui-col-md4">
                <div  style="background-color: #0000FF;">4</div>        
            </div>
            <div class="layui-col-md4">
                <div  style="background-color: #2D93CA;">4</div>        
            </div>  
        </div>

3.列偏移

向右偏移指定列数（1-12最大不能超过12）

  <!-- layui-col-md-offset* (*表示列数) !-->
    <h3>列偏移</h3>
    <div class="layui-row">
        <div class="layui-col-md4 " >
            <div style="background-color: #00F7DE;">4</div>     
        </div>
        <div class="layui-col-md4 layui-col-md-offset4">
            <div  style="background-color: #0000FF;">向右偏移4列</div>       
        </div>  
    </div>

4.列嵌套

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

    <h3>列嵌套</h3>
    <div class="layui-row">
        <div class="layui-col-md6" style="background-color: #00F7DE;" >
            <div class="layui-row">
                <div class="layui-col-md3" style="background-color: brown;">
                    内部列 
                </div>  
                <div class="layui-col-md5" style="background-color: lawngreen;">
                    内部列 
                </div>  
                <div class="layui-col-md4" style="background-color: antiquewhite;">
                    内部列 
                </div>  
            </div>      
        </div>
    </div>

4.按钮

向任意HTML元素设定class="layui-btn"设置一个基础按钮

通过追加格式为layui-btn-{type}的class来定义其他按钮风格

1.基础按钮

<!-- 基础按钮 -->
    <button type="button" class="layui-btn">一个标准按钮</button>
    <a href="https://www.bilibili.com/video/BV19V411b7sx?p=4&spm_id_from=pageDriver" class="layui-btn">跳转</a>
    <div class="layui-btn">一个按钮</div>

2.不同主题的按钮

<!-- 不同主题的按钮 -->
    <button type="button" class="layui-btn">基础按钮</button>
    <button type="button" class="layui-btn layui-btn-primary">原始按钮</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

3.不同尺寸的按钮

<!-- 不同尺寸的按钮
            大型：layui-btn-lg
            小型:layui-btn-sm
            迷你:layui-btn-xs
    -->
    <button class="layui-btn layui-btn-primary layui-btn-lg">大型</button>
    <button class="layui-btn">默认</button>
    <button class="layui-btn layui-btn-danger layui-btn-sm">小型</button>
    <button class="layui-btn layui-btn-xs">迷你</button>

4.圆角按钮

<!-- 圆角按钮   layui-btn-radius-->
        <button type="button" class="layui-btn layui-btn-radius">基础按钮</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百
    </button>
        <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
        <button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>

5.图标按钮

<!-- 图标按钮 
            内置图标一览表（168个）官网自己找
        -->
        button  type="button" class="layui-btn">
            <i class="layui-icon">&#xe608;</i>添加
        </button>
        <button  type="button" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#x1002;</i>刷新
        </button>
        <button  type="button" class="layui-btn layui-btn-sm layui-btn-warm">
            <i class="layui-icon layui-icon-heart"></i>关注
        </button>

5.导航

1.水平导航

         
   <!-- 水平导航 layui-nav
                layui-nav-item表示是导航的子项
                layui-this表示默认选中
                layui-nav-child二级菜单
            -->
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="">最新活动</a></li>
            <li class="layui-nav-item"><a href="">产品</a></li>
            <li class="layui-nav-item layui-this"><a href="">大数据</a></li>
            <li class="layui-nav-item">
                <a href="">解决方案</a>
                <dl class="layui-nav-child">
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后端模块</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
        </ul>
        <!--导航需要导入element依赖，单个用单引号，多个用数组 !-->
        <script type="text/javascript">
        layui.use('element',function(){
        var element=layui.emelent;
        });
    </script>

2.垂直导航

  <!-- 垂直导航 layui-nav layui-nav-tree-->
​
        <ul class="layui-nav layui-nav-tree">
            <li class="layui-nav-item"><a href="">最新活动</a></li>
            <li class="layui-nav-item"><a href="">产品</a></li>
            <li class="layui-nav-item layui-this"><a href="">大数据</a></li>
            <li class="layui-nav-item">
                <a href="">解决方案</a>
                <dl class="layui-nav-child">
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后端模块</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
        </ul>

3.侧边导航

 <!-- 侧边导航 layui-nav layui-nav-tree layui-nav-side-->
​
        <ul class="layui-nav layui-nav-tree layui-nav-side">
            <li class="layui-nav-item"><a href="">最新活动</a></li>
            <li class="layui-nav-item"><a href="">产品</a></li>
            <li class="layui-nav-item layui-this"><a href="">大数据</a></li>
            <li class="layui-nav-item">
                <a href="">解决方案</a>
                <dl class="layui-nav-child">
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后端模块</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
        </ul>

4.设置导航的主题颜色

<!-- 设置导航的主题颜色  layui-bg-颜色-->
<!--    <span class="layui-badge">6</span>徽章图标! -->
        <ul class="layui-nav  layui-bg-cyan">
            <li class="layui-nav-item"><a href="">最新活动</a></li>
            <li class="layui-nav-item"><a href="">产品<span class="layui-badge">6</span></a></li>
            <li class="layui-nav-item layui-this"><a href="">大数据</a></li>
            <li class="layui-nav-item">
                <a href="">解决方案</a>
                <dl class="layui-nav-child">
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后端模块</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
        </ul>

5.面包屑式导航

<!-- 面包屑式导航  layui-breadcrumb -->
 <!--通过lay-separator='符号'可以以指定字符分割（默认/） -->
<span class="layui-breadcrumb" lay-separator='-'>
             <a href="">首页</a>
             <a href="">国际新闻</a>
             <a href="">亚太地区</a>
             <a><cite>正文</cite></a> 
 </span>

6选项卡

1.默认风格

<!-- 默认风格：layui-tab -->
    <div class="layui-tab">
            <ul class="layui-tab-title">
                    <li class="layui-this">网站设置</li>
                    <li>用户管理</li>
                    <li>权限分配</li>
                    <li>商品管理</li>
                    <li>订单管理</li>
            </ul>       
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">内容1</div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">内容4</div>
                <div class="layui-tab-item">内容5</div>   
            </div>
        </div>
        <!-- 导入依赖 -->
        <script type="text/javascript">
        layui.use('element',function(){
            var element=layui.emelent;
        });
        </script>

2.简洁风格

<!-- 简洁风格：layui-tab-brief -->
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                    <li class="layui-this">网站设置</li>
                    <li>用户管理</li>
                    <li>权限分配</li>
                    <li>商品管理</li>
                    <li>订单管理</li>
            </ul>       
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">内容1</div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">内容4</div>
                <div class="layui-tab-item">内容5</div>   
            </div>
        </div>
        <!-- 导入依赖 -->
        <script type="text/javascript">
        layui.use('element',function(){
            var element=layui.emelent;
        });
        </script>

3.卡片风格

<!-- 卡片风格：layui-tab-card -->
        <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>
        <!-- 导入依赖 -->
        <script type="text/javascript">
        layui.use('element',function(){
            var element=layui.emelent;
        });
        </script>

4.删除Tab选项卡

!-- 可以对父级容器设置属性lay-allowClose="true"来允许Tab选项卡被删除 -->
        <div class="layui-tab layui-tab-brief" lay-allowClose="true">
            <ul class="layui-tab-title">
                    <li class="layui-this">网站设置</li>
                    <li>用户管理</li>
                    <li>权限分配</li>
                    <li>商品管理</li>
                    <li>订单管理</li>
            </ul>       
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">内容1</div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">内容4</div>
                <div class="layui-tab-item">内容5</div>   
            </div>
        </div>
        <!-- 导入依赖 -->
        <script type="text/javascript">
        layui.use('element',function(){
            var element=layui.emelent;
        });
        </script>

7表格

<!-- 
            表格：layui-table
            常用属性：lay-even 隔行换色
                    lay-skin 设置边框风格
                                line(行边框)
                                row(列边框)
                                nob(无边框)
                    lay-size设置表格尺寸
                                sm(小尺寸)
                                lg(大尺寸)
         -->
        <table class="layui-table">
            <!-- 设置列的宽度 -->
            <colgroup>
              <col width="100">
              <col width="150">
              <col width="200">
              <col>
            </colgroup>
            <!-- 表头 -->
            <thead>
              <tr>
                <th>姓名</th>
                <th>名族</th>
                <th>出场时间</th>
                 <th>格言</th>
              </tr> 
            </thead>
            <!-- 内容 -->
            <body>
              <tr>
                <td>贤心</td>
                <td>汉族</td>
                <td>1989-10-14</td>
                <td>人生似修行</td>
              </tr>      
              <tr>
                <td>岳飞</td>
                <td>汉族</td>
                <td>1103-北宋崇宁二年</td>
                <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
              </tr>
              <tr>
                <td>孟子</td>
                <td>华夏族（汉族）</td>
                <td>公元前-372年</td>
                <td>猿强，则国强。国强，则猿更强！ </td>
              </tr>
            </body>
          </table>

1.隔行换色

<!-- lay-even 隔行换色 -->
        <table class="layui-table" lay-even >
            <!-- 设置列的宽度 -->
            <colgroup>
              <col width="100">
              <col width="150">
              <col width="200">
              <col>
            </colgroup>
            <!-- 表头 -->
            <thead>
              <tr>
                <th>姓名</th>
                <th>名族</th>
                <th>出场时间</th>
                 <th>格言</th>
              </tr> 
            </thead>
            <!-- 内容 -->
            <body>
              <tr>
                <td>贤心</td>
                <td>汉族</td>
                <td>1989-10-14</td>
                <td>人生似修行</td>
              </tr>      
              <tr>
                <td>岳飞</td>
                <td>汉族</td>
                <td>1103-北宋崇宁二年</td>
                <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
              </tr>
              <tr>
                <td>孟子</td>
                <td>华夏族（汉族）</td>
                <td>公元前-372年</td>
                <td>猿强，则国强。国强，则猿更强！ </td>
              </tr>
            </body>
          </table>

2.设置边框风格

<!-- lay-skin 设置边框风格：line(行边框)   row(列边框)     nob(无边框) -->
        <table class="layui-table" lay-skin="nob">
            <!-- 设置列的宽度 -->
            <colgroup>
              <col width="100">
              <col width="150">
              <col width="200">
              <col>
            </colgroup>
            <!-- 表头 -->
            <thead>
              <tr>
                <th>姓名</th>
                <th>名族</th>
                <th>出场时间</th>
                 <th>格言</th>
              </tr> 
            </thead>
            <!-- 内容 -->
            <body>
              <tr>
                <td>贤心</td>
                <td>汉族</td>
                <td>1989-10-14</td>
                <td>人生似修行</td>
              </tr>      
              <tr>
                <td>岳飞</td>
                <td>汉族</td>
                <td>1103-北宋崇宁二年</td>
                <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
              </tr>
              <tr>
                <td>孟子</td>
                <td>华夏族（汉族）</td>
                <td>公元前-372年</td>
                <td>猿强，则国强。国强，则猿更强！ </td>
              </tr>
            </body>
          </table>

3.表格尺寸

<!-- lay-size设置表格尺寸: sm(小尺寸)   lg(大尺寸)-->
<table class="layui-table" lay-size="lg">
            <!-- 设置列的宽度 -->
            <colgroup>
              <col width="100">
              <col width="150">
              <col width="200">
              <col>
            </colgroup>
            <!-- 表头 -->
            <thead>
              <tr>
                <th>姓名</th>
                <th>名族</th>
                <th>出场时间</th>
                 <th>格言</th>
              </tr> 
            </thead>
            <!-- 内容 -->
            <body>
              <tr>
                <td>贤心</td>
                <td>汉族</td>
                <td>1989-10-14</td>
                <td>人生似修行</td>
              </tr>      
              <tr>
                <td>岳飞</td>
                <td>汉族</td>
                <td>1103-北宋崇宁二年</td>
                <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
              </tr>
              <tr>
                <td>孟子</td>
                <td>华夏族（汉族）</td>
                <td>公元前-372年</td>
                <td>猿强，则国强。国强，则猿更强！ </td>
              </tr>
            </body>
          </table>

8.表单

1.输入框

<!-- 
    表单：
            常用属性
                        required           浏览器固定的必填字段
                        lay-verify         需要验证的类型（required表示必填项）
                        layui-input-block  占满一行
                        layui-input-inline 占据部分宽度
            文本框
                        placeholder   当文本框为空时系统默认显示的信息
                        autocomplete 表单元素是否自动填充（当浏览器中缓存了相同name属性的值时，会自                                      动填充，默认启动，off表示关闭）
         -->
        <!-- 在一个容器中设定 class="layui-form"来标识一个表单元素块-->
        <form class="layui-form" action="">
        <!-- 基本的行区块结构，它提供了响应式的支持，可以换成其他结构，但必须要在外层容器中定义              class="layui-form",form才能正常工作-->            
            <div class="layui-form-item">
                <label class="layui-form-label">标题：</label>
                <div class="layui-input-inline">
                    <!-- 文本框 -->
                    <input type="text" name="title" required lay-verify="required"                          placeholder="请输入标题" autocomplete="off" class="layui-input" />
                </div>
            </div>
            
            <!-- 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-sm" lay-submit lay-                                  fitter="formdemo">立即提交</button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm"                                type="reset">重置</button>
                </div>
            </div>                              
        </form>
        
        <!-- 加载form模块 -->
        <script>
            layui.use("form",function(){
                var form=layui.form;
            })
        </script>

2.下拉框

        <!-- 
            下拉框
                    disabled：开启禁用功能
                    selected：默认选中
                    通过optgroup标签来进行分组
                    通过lay-search开启搜索匹配功能
             -->
        <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <select name="city" lay-verify="required" disabled>
                        <option value="">请选择一个城市</option>
                        <option value="北京" selected>北京</option>
                        <option value="上海">上海</option>
                        <option value="深圳">深圳</option>                  
                    </select>
                    
                    
                    <!-- 分组 -->
                    <select name="quiz" >
                        <option value="">请选择</option>
                        <optgroup label="城市记忆">
                            <option value="你第一次工作的城市">你第一次工作的城市</option>
                            <option value="你第一份工作">你第一份工作</option>
                        </optgroup> 
                        <optgroup label="学生时代">
                            <option value="你的学号">你的学号</option>
                            <option value="你最喜欢的老师">你最喜欢的老师</option>
                        </optgroup> 
                    </select>
                    
                    
                    <!-- 搜索功能 -->
                    <select name="city" lay-search>
                        <option value="">请选择一个城市</option>
                        <option value="北京" selected>北京</option>
                        <option value="上海">上海</option>
                        <option value="深圳">深圳</option>                  
                    </select>
                </div>
            </div>

3.复选框

<!-- 
                复选框
                        通过title设置文本信息
                        通过checked设置默认选中
                        通过lay-skin设置原始样式（lay-skin="primary"）
             -->
            <div class="layui-form-item">
                <label class="layui-form-label">爱好：</label>
                <div class="layui-input-block">
                    <!-- 复选框默认样式-->
                    <input type="checkbox" name="hobby" title="唱歌" value="sing" checked/>
                    <input type="checkbox" name="hobby" title="跳舞" value="dance"/>
                    <input type="checkbox" name="hobby" title="游戏" value="game"/>
                    <hr>
                    <!-- 复选框原始样式-->
                    <input type="checkbox" name="hobby" title="唱歌" value="sing" lay-skin="primary"/>
                    <input type="checkbox" name="hobby" title="跳舞" value="dance" lay-skin="primary"/>
                    <input type="checkbox" name="hobby" title="游戏" value="game" lay-skin="primary"/>
                </div>
            </div>
开关

    <!-- 
            开关
                通过设置lay-skin="switch"可以把复选框变为开关
                通过设置lay-text可以自定义开关两种状态的文本
                通过设置checked可以设定开关默认打开
                通过设置disabled可以设置禁用开关
                通过设置value可以自定义值，否则选中默认为on
            -->
`           <div class="layui-form-item">
                <label class="layui-form-label">开关：</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="aa" lay-skin="switch" checked/>
                        <input type="checkbox" name="bb" lay-skin="switch" lay-text="打开|                            关闭"disabled />
                    <input type="checkbox" name="cc" lay-skin="switch" value="打开"                           checked />  
                </div>
            </div>

4.单选框

<!-- 
                单选框
                        和复选框一样只需要把type的值改为radio即可
             -->
                <div class="layui-form-item">
                    <label class="layui-form-label">性别：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" title="男" value="男"/>
                        <input type="radio" name="sex" title="女" value="女"/>
                    </div>
                </div>

5.文本域

<!-- 文本域 -->
            <div class="layui-form-item">
                <label class="layui-form-label">简介：</label>
                <div class="layui-input-block">
                    <textarea name="remark" required lay-verify="required" placeholder="请输入简介" class="layui-textarea"></textarea>
                
                </div>
            </div>

6.行内表单

<!-- 
        组装行内表单 
                    class="layui-inline"        定义外层行内
                    class="layui-input-inline"  定义内层行内
                    通过设置lay-ignore可以忽略美化渲染，保留HTML最原始的风格
-->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">范围</label>
                    <div class="layui-input-inline">
                        <input type="text" name="min" placeholder="￥" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" name="max" placeholder="￥" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="upwd" placeholder="请输入密码" autocomplete="off" class="layui-input" />
                    </div>
                </div>          
            </div>

7.表单方框风格

<!-- 表单方框风格  layui-form-pane  -->
            <div class="layui-form-item layui-form-pane">
                 <label class="layui-form-label">城市</label>
                      <div class="layui-input-inline">
                           <select name="city" lay-verify="required">
                               <option value="">请选择一个城市</option>
                               <option value="北京" selected>北京</option>
                               <option value="上海">上海</option>
                               <option value="深圳">深圳</option>                   
                            </select>                   
                        </div>
            </div>
 <!--复选框/单选框/开关，这些组合在该风格下需要额外添加pane属性，否则看起来会特别别扭--> 
 
       <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item "pane>
                    <label class="layui-form-label">性别：</label>
                    <div class="layui-input-block">
                        input type="radio" name="sex" title="男" value="男"/>
                        <input type="radio" name="sex" title="女" value="女"/>
                    </div>
            </div>  
        </form>

9.组件示例

1.弹出层

type 基本层类型 类型:number 可传入的值：0（信息框，默认）1（页面层） 2（iframe层） 3（加载层） 4（tips层）

信息框

//信息框   
        layui.use('layer',function(){
                var layer=layui.layer;
                layer.open({
                    type:0,
                    title:["系统信息","color:red;"],
                    //title:false,不显示标题
                    //content可以传入任意的文本或html
                    content:"hello"
                     });
                 });

页面层

//页面层   
        layui.use('layer',function(){
                var layer=layui.layer;
                layer.open({
                    type:1,
                    title:"系统信息",   
                    //content可以传入任意的文本或html
                    content:"<div style='height: 100px; width: 200px;'>傻逼</div>"
                });
            });

iframe层

 //iframe层   
    layui.use('layer',function(){
                var layer=layui.layer;
                layer.open({
                    type:2,
                    title:"系统信息",   
        //content是一个url,如果你不想让iframe出现滚动条，你还可以content:["url",no""]
                    content:"https://www.bilibili.com",
                    area:["800px","700px"]//设置宽高，默认自适应
                    });
                });

tips层

//tips层
        <span>内容1</span>
         <span>内容2</span>
         <span>内容3</span>
         <span id="sp">内容4</span>
         
        layui.use('layer',function(){
                var layer=layui.layer;
                layer.open({
                    type:4,
                    content:["内容","#sp"]    //数组第二项即吸附元素选择器或DOM
                    });
            });

icon图标

//类型：number 默认-1（信息框）/0(加载层)
//信息框默认不显示图标，当你想显示图标时，默认层可以传入0-6，如果是加载层可以传入0-2
                layui.use('layer',function(){
                    var layer=layui.layer;
                    layer.alert("酷毙了",{icon:1});
                    layer.msg("不开心",{icon:5});
                    layer.load(1);//风格的加载
                    });

练习

layui.use('layer',function(){
                    var layer=layui.layer;
                layer.msg("你愿意做我朋友吗",{
                        time: 0, //弹窗不会自动关闭
                        btn:["愿意","拒绝"], //按钮
                        yes:function(index){
                            layer.close(index);
                            layer.msg("新朋友你好！",{
                                icon:6,//图标
                                btn:["开心","快乐"]
                            });
                        },
                    });
                            
                    layer.msg("玩命加载中",function(){
                        layer.msg("抱歉加载不出来")
                            }); 
                    });
                });

10.数据表格

1.简单使用

  <!-- 准备容器接受数据 -->
            <table id="demo1"></table>
            
            <!-- 加载table模块 -->
            <script type="text/javascript" >
                    layui.use("table",function(){
                        var table=layui.table;
                        // 加载table实例
                        table.render({
                            elem:"#demo1",//绑定容器的属性id
                            url:"js/user.json",//数据接口
                            cols:[[
                                {field:"id",title:"编号",sort:true,width:100},//sort排序
                                {field:"username",title:"姓名"},
                                {field:"sex",title:"性别"},
                                {field:"city",title:"城市"},
                            ]]
                        })
                        
                    })
            
            </script>

2.渲染方式

1方法渲染（常用）

<!-- 准备容器接受数据 -->
            <table id="demo2"></table>
            
            <!-- 加载table模块 -->
            <script type="text/javascript" >
                    layui.use("table",function(){
                        var table=layui.table;
                        // 进行渲染
                        table.render({
                            elem:"#demo1",//绑定容器的属性id
                            url:"js/user.json",//数据接口
                            height:315,//设置高度
                            page:true,//开启分页
                            cols:[[
                                {field:"id",title:"编号",sort:true,width:100},//sort排序
                                {field:"username",title:"姓名"},
                                {field:"sex",title:"性别"},
                                {field:"city",title:"城市"},
                            ]]
                        })
                        
                    })  
            </script>

2.自动渲染

<!-- 自动渲染
                    准备一个带有class="layui-table"的table标签
                    对标签设置属性lay-data=""用来配置一些基础参数
                    在<th>标签中设置属性lay-data=""用来配置表头信息
         -->
         <table class="layui-table" lay-data="{url:'js/user.json',page:true}">
            <thead>
                <tr>
                    <th lay-data="{field:'id',width:100}">用户编号</th>
                    <th lay-data="{field:'username'}">姓名</th>
                    <th lay-data="{field:'sex'}">性别</th>
                    <th lay-data="{field:'city'}">城市</th>
                </tr>           
            </thead>     
         </table>
         
          <script type="text/javascript" >
                layui.use("table",function(){
                    var table=layui.table;
            </script>

转换静态表格

 <table lay-filter="demo">
             <thead>
                <tr>
                    <th lay-data="{field:'id',width:100}">用户编号</th>
                    <th lay-data="{field:'username'}">姓名</th>
                    <th lay-data="{field:'sex'}">性别</th>
                    <th lay-data="{field:'city'}">城市</th>
                </tr>           
             </thead>   
             <tbody>
                 <tr>
                     <td>111</td>
                     <td>王二麻子</td>
                     <td>女</td>
                     <td>上海</td>             
                 </tr>
             </tbody>
         </table>
         
            <script type="text/javascript" >
                    layui.use("table",function(){
                    var table=layui.table;
                    //转换静态表格
                    table.init("demo",{
                        heigth:315,//设置高度
                        //支持所有基础参数
                        });     
                    });

3.行内工具栏以及事件监听

 <!-- 搜索框 -->
        <div class="demoTable">
          搜索ID：
          <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
          </div>
          <button class="layui-btn" id="searchBtn">搜索</button>
        </div>
        <!-- 容器 -->
        <table id='test' lay-filter='test'></table>
        <!-- 表头工具栏 -->
        <script type="text/html" id="barDemo">
          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <script type="text/javascript" >
                layui.use("table",function(){
                var table=layui.table;
                    // 加载table实例
                    table.render({
                        elem:"#test",//绑定容器的属性id
                        url:"js/user.json",//数据接口
                        height:315,//设置高度
                        page:true,//开启分页
                        cols:[[
                            {field:"id",title:"编号",sort:true,width:100},//sort排序
                            {field:"username",title:"姓名"},
                            {field:"sex",title:"性别"},
                            {field:"city",title:"城市"},
                            {field:"操作",toolbar:"#barDemo"}
                            
                        ]]
                    });
                    // 行内工具栏监听事件
                        table.on('tool(test)', function(obj){
                                //得到当前操作行的信息
                                var tr=obj.data;
                                  //得到事件名
                                 var eventName=obj.event;
                                 //判断事件名执行对应的操作
                                 if(eventName=="del"){
                                     //确认框
                                        layer.confirm("是否确认删除",function(index){
                                            obj.del();
                                            //关闭弹出层
                                            layer.close(index);
                                        });
                                        }else if(eventName=="edit"){
                                            //输入框
                                            layer.prompt({
                                                //表单元素的类型：0=文本框 1=密码框 2=文本域
                                                formType:0,
                                                value:tr.username//设置输入框的值                                                                                  
                                            },function(value,index){
                                            //update修改指定单元格的值
                                            //value表示输入的值
                                                obj.update({
                                                    username:value                                                  
                                                });
                                                layer.close(index);
                                            })
                                    }
                                }); 
  // 监听单元格编辑事件，设置edit属性 ，单元格编辑类型（默认不开启）目前支支持text(输入框)
                    table.on('edit(test)',function(obj){
                        //获取修改后的值
                        var value=obj.value;
                        //获取修改前的值
                        var data=obj.data;
                        //得到修改的字段名
                        var field=obj.field;
                        layer.msg("【id:"+data.id+"】的"+field+"值修改为"+value)
                    })
                }); 
                //表格重载
                    //给指定元素绑定事件
                    $(document).on('click','#searchBtn',function(data){
                        //获取搜索框对象
                        var sreach=$("#demoReload");
                        //调用表格数据的重载方法 table.reload(ID,options)
                        table.reload('test',{
                            where:{//设置需要传递的参数
                                id:sreach.val(),
                                name:"zs"
                                
                            },
                            page:{curr:1}
                            //表示从第一页开始搜索，不写默认从当前页开始搜索，前面页不计入搜索范围内
                        })
                    })
                            
        </script>

Z .Y
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值