layui

栅格系统

1. 定义行 .layui-row
2. 定义列 .layui-col-md*
   1. md 表示不同屏幕的标识（xs超小 | sm小 | md中等 | lg大屏），将行分成均匀的12列
   2. * 表示列的数量，超过12列就自动换行
3. 相应式规则，可以为一个标签给予sm和md的类 class="layui-col-sm4 layui-col-md6" ，栅格就自动根据屏幕的分辨率选择对应的样式效果
4. 列边距，支持列之间为1px-30px的所有双数间隔，以及1px | 5px | 15px | 25px的单数间隔，如 layui-col-space2 ，即上下左右的padding。至少三层才能显示出效果
5. 列偏移，以列为单位的向右偏移，如 layui-col-md-offset1 偏移一列

6. 列嵌套，在列内嵌套下一层列

   <div class="layui-row">
        <div class="layui-col-md8" style="background-color: #d7f4c7;">
            <div class="layui-row">
                <div class="layui-col-md3" style="background-color: #8EFBFA">3</div>
                <div class="layui-col-md4" style="background-color: #FD82F7">4</div>
                <div class="layui-col-md5" style="background-color: #FCB4C1">5</div>
            </div>
        </div>
    </div>

   基本元素

7. 按钮与图标官网

8. 导航，依赖element模块
   1. 水平导航 layui-nav
   2. 导航的子项 layui-nav-item
   3. 当前被选中项 layui-this
   4. 二级菜单 layui-nav-child
   5. 垂直导航 layui-nav layui-nav-tree
   6. 侧边导航 layui-nav layui-nav-tree layui-nav-side
   7. 默认展开 layui-nav-itemed
   8. 导航背景颜色 layui-bg-gray
   9. 面包屑式导航 class=”layui-breadcrumb”，设置分割符 lay-separator=”-“
9. 选项卡，依赖element模块
   1. 标题区与内容区一一对应
   2. 默认 layui-tab
   3. 标题 class=”layui-tab-title”
   4. 内容 class=”layui-tab-content”
   5. 默认选中 class=”layui-this”
   6. 简洁样式 class=”layui-tab layui-tab-brief”
   7. 允许删除选项卡 lay-allowClose=”true”
10. 表格 layui-table
    1. 各行换色 (与class同级 直接写) lay-even
    2. 边框 lay-skin=””
    3. 设置表格尺寸 lay-size=””

5. 表单，需要form模块

1. form的类 layui-form

2. 表单的每一行 class=”layui-form-item”

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

   • required 必填字段
   • lay-verify=”” 需要验证的类型（required为必填）
   • class=”layui-input” 通用样式
   • placeholder 输入框为空时，默认显示的文本信息
   • autocomplete 浏览器是否自动填充
   • class=”layui-input-block” 占据父容器的全部宽度
   • class=”layui-input-inline” 占据父容器的部分宽度
3. 为标签添加 disable ，设置为禁用
4. 下拉框，用 selected 设置默认选中项
   1. 通过设定属性 lay-search 来开启搜索匹配功能
5. 复选框
   1. 使用title属性设置自定义文本
   2. 通过checked设置默认被选中项
   3. 使用lay-skin=””设置样式
   4. 通过value=””设置被选框的值
6. 开关，input的lay-skin=”switch”
   1. 通过checked设置默认打开
   2. 通过 lay-text=”on|off”或”打开|关闭” 设置开关两种状态的文本
   3. 通过value=””设置提交时的值
7. 文本域，textarea的class=”layui-textarea”

组件示例

1. 弹出层 layer

• 作为独立的组件使用
  • 在独立版本官网下载，引用.js与.css
• 作为layui模块化使用
  • 引入layui的.js与.css
  • layer.msg("Hi");

1. 如果是用layer.open执行tips层（4），即弹出层吸附到指定的标签旁

   layer.open({
   type: 4,
   content: ['内容', '#id'], //数组第二项即吸附元素选择器或者DOM
   ...
   });

2. shadeClose: true，点击遮罩关闭

3. shade: [0.2, ‘#393D49’]，设置遮罩效果
4. time: 1000, 设置延迟多少ms自动关闭
5. fixed: false, 弹出框在页面滚动时不固定在可视范围内
6. msg 配置：

   layer.msg("加载中...",{
      anim: 4,
   }, function(){
      layer.msg("hei~");
   })
   // 即：
   layer.msg("文字内容",{ 参数设置 },function(){ 关闭之后要做的事 });

2. 时间日期选择器 laydate

• 将laydate渲染到指定id的input上 ```javascript

layui.use(‘laydate’, function(){ var laydate = layui.laydate;

//执行一个laydate实例
laydate.render({
  elem: '#date' //指定元素
});

});

- 可以根据 type 属性设置选择器的类型（选择年、年月、年月日、时间...）
- 可以通过 format 自定义日期的显示格式
<a name="2YWcO"></a>
### 3. 分页 laypage
- 使用 laypage 渲染到指定 id 的容器中
```javascript
        layui.use('laypage', function(){
          var laypage = layui.laypage;
          //执行一个laypage实例
          laypage.render({
            elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
            count: 100, //数据总数，从服务端得到
            groups: 6, // 连续出现的页码数
            layout: ['prev', 'page', 'next', 'limit', 'count'],  // 自定义排版
            limits: [5,10,20],  // 设置limits里面出现的各个条数
            jump: function(obj, first){
                // obj 包含了当前分页的所有参数
                console.log(obj.curr);
            }
          });
        });

4. 数据表格 table

基本使用

• 有三种渲染方式，一般用方法渲染
• 定义一个 table ，并设置其 id ```javascript

<a name="0f4e2e18"></a>
#### 表格的事件
- 需要为 table 添加 ` lay-filter="test"` 属性，下面代码中 toolbar(test) 的 `test` 就是这个属性
- 为按钮添加 `lay-event="事件名"` 属性，再在table的on中判断事件名
- 在 table.render 的下面写
```javascript
table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            console.log(checkStatus);
            var evenName = obj.event;
            switch(evenName){
                case 'getCheckData':
                      var arr = checkStatus.data;
                    layer.msg(JSON.stringify(arr));
                    break;
              case 'getCheckLength':
                    var arr = checkStatus.data;
                    layer.msg("选中了"+arr.length+"条数据");
                    break;
              case 'isAll':
                    var flag = checkStatus.isAll;
                    var str = flag ? "全选" : "未全选";
                  layer.msg(str);
                    break;
             }
        });
})

• obj 含有表格的全部数据
• 在表格的表头按钮被点击时触发，如上文的 toolbarDemo 里面的按钮

• 下面写表右的按钮的事件

        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 == "detail"){
            }else if(eventName == "edit"){
                // 输入框
                layer.prompt({
                    formType: 0, // 表单元素的类型 0-文本框 1-密码框 2-文本域
                    value: tr.position, // 设置输入框的值
                }, function(value, index){
                    // 修改指定单元格的值
                    obj.update({
                        position: value,
                    });
                    layer.close(index);
                });
            }
        });

• 这里出现了两种弹出框，一个是 layer.confirm 和 layer.prompt ，并且两处的 index 为两个弹框的下标