JZTXT

LayUI

发布时间 2023-09-11 16:04:11作者: 酒宴花窗

CSS类(Class)

  1. layui-elem-quote
    'blockquote'
  2. layui-text
    'blockquote'
  3. layui-elem-field
    'fieldset'
  4. laytui-field-title
    'fieldset'
  5. layui-form
    'form'
  6. laytui-form-item
    'div'
  7. laytui-form-label
    'label'
  8. laytui-input-block
    'div'
  9. layui-input
    'input'
  10. layui-inline
    'div'
  11. layui-form-mid
    'div'
  12. layui-word-aux
    'div'
  13. layui-form-text
    'div'
  14. layui-textarea
    'textarea'
  15. layui-btn layui-btn-primary
    'button'
  16. layui-hide
    'table'
  17. layui-btn-container
    'div'
  18. layui-btn-sm
  19. layui-btn-xs
  20. layui-btn-md
  21. layui-btn-danger

标签(HTML Element)

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

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

  3. 'input'

    • 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”
        这表示此处填入为 手机号，必须为数字，且为必填项。

    • type
      text
      tel
      password
      checkbox

    • lay-skin
      primary
      switch

    • lay-text="ON|OFF"

    • checked

    • lay-filter

    • value

    • name

  4. 'select'

    • lay-search

    • lay-verify

  5. 'div'

    • pane

  6. 'textarea'

    • placeholder

  7. 'button'

    • type
      submit
      reset
      text

    • layui-submit

    • lay-filter

    • lay-event

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"