LayUI

CSS类(Class)

1. layui-elem-quote

2. layui-text

3. layui-elem-field

4. laytui-field-title

5. layui-form

6. laytui-form-item

7. laytui-form-label

8. laytui-input-block

9. layui-input

10. layui-inline

11. layui-form-mid

12. layui-word-aux

13. layui-form-text

14. layui-textarea

15. layui-btn layui-btn-primary

16. layui-hide

17. layui-btn-container

18. layui-btn-sm

20. layui-btn-xs

22. layui-btn-md

24. layui-btn-danger

标签(HTML Element)

1. 'fieldset'
   'legend'用于表示其父元素的内容标题

2. 'select'
   'optgroup'可选
   - label
   'option'
   - value
   - selected
   - disabled

3. 'input'

   • type
     text
     tel
     password
     checkbox

   • checked

   • value

   • name

4. 'select'

5. 'div'

   • pane

6. 'textarea'

   • placeholder

7. 'button'

   • type
     submit
     reset
     text

LayUI框架属性

lay-verify
    Layui框架有自带的表单验证功能，在input标签中加入lay-verify属性，通过给定不同属性值，来对表单输入框进行不同的验证

    layui 表单自带校验：
    1. lay-verify：是表单验证的关键字
    2. 其中对其指定不同值可实现简单验证
    3. required (该输入框必填项)
    4. phone（手机号）
    5. email（邮箱）
    6. url（网址）
    7. number（数字）
    8. date（日期）
    9. identity(身份证)
    10. title(标题)
    同时Layui支持多条规则的验证：
    格式：lay-verify=”验证A|验证B”
    例如：lay-verify=”require|phone|number”
    这表示此处填入为 手机号，必须为数字，且为必填项。

lay-skin
    primary
    switch

lay-text="ON|OFF"

layui-submit

lay-event

lay-search

LayUI Script

layui.use(['form','layedit','laydate','table'],function(){});

    laydate.render({
        elem:'#id'
    });

    table.render({
        elem:'#id'
        ,url:'xx.js'
        ,toolbar:'#id'
        ,title:''
        ,totalRow:true
        ,cols:[[
            {type:'checkbox',fixed:'left'}
            ,{field:'',title:'',fixed:'',unresize:,sort:,totalRowText:'',width:,edit:,templet:function(res){
                return '<em>'+res.email+'</em>'
            },toolbar:'#barDemo'}
        ]]
        ,page:true
    });

    var editIndex = layedit.build('LAY_demo_editor');

    form.verify({});
        title:function(value){
            if(value.length'5){
                return 'ERROR';
            }
        }
        pass:[
            /^[\S]{6,12}$/
            ,'提示'
        ]

        content:function(value){
            layedit.sync(editIndex);
        }

    form.on('switch(switchTest)',function(data){});//lay-filter
        lay.msg('',{
            offset:'6px'
        });
        layer.tips('提示', data.othis)
        layer.alert(JSON.stringify(data.field),{
            title:''
        });

    layui.$('#id').on('click',function(){});
        form.val('example',{});//example为lay-filter
            "":"",
            "",""
    
    table.on('toolbar(test)',function(obj){});
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'getCheckData':
                var data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            break;
            case 'getCheckLength':
                var data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            break;
            case 'isAll':
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            break;
            
type="text/html"