layui使用心得


首先先说一下input的各个属性:

class="layui-input"-------将input定义为layui样式,

name="finishdate"-------规定了input的名称,只有设置了 name 属性的表单元素才能在提交表单时传递它们的值,

lay-verify="required"-------表单验证(在js中书写form.verify()方法对自定义的标签值进行校验 ),

placeholder------input的填充

autocomplete------属性规定输入字段是否应该启用自动完成功能(当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项),

再说一下弹出层layer:

在做项目时我把一个input的表单放在layer里面显示,然后说一下layer各个参数的用法:

1.type:   类型:number,默认为0

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


2.title:    类型:String/Array/Boolean,默认:'信息'

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


3.content:   类型:String/DOM/Array,默认:''

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


4.area:   类型:String/Array,默认:'auto'

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

5.btn:   类型:String/Array,默认:'确认'

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


6.btnAlign - 按钮排列

你可以快捷定义按钮的排列位置,btnAlign的默认值为r,即右对齐。该参数可支持的赋值如下:

btnAlign: 'l' 按钮左对齐

btnAlign: 'c'  按钮居中对齐

btnAlign: 'r'  按钮右对齐。默认值,不用设置


7.maxmin:最大最小化

该参数值对type:1type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可


8.fixed - 固定

类型:Boolean,默认:true

即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可


9.resize - 是否允许拉伸

类型:Boolean,默认:true

默认情况下,你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 false即可。该参数对loading、tips层无效



layui--table格式:

详见layui-table的相关问题

你可能感兴趣的:(layui使用心得)