
HTML:
" title="">
" title="">
JS:
// layui框架写法(全选)layui.use('form',function(){
varform = layui.form
//这里的 menu 就是 HTML上面的lay-filter值,就固定一个值就好
form.on('checkbox(menu)',function(data){
varid = data.value
//这里实现勾选 $('#top-'+id+' input[name=category]').each(function(index, item){
item.checked = data.elem.checked
})
form.render('checkbox')
// console.log(data.elem)//得到checkbox原始DOM对象
// console.log(data.elem.checked)//是否被选中,true或者false
// console.log(data.value)//复选框value值,也可以通过data.elem.value得到
// console.log(data.othis)//得到美化后的DOM对象 })
})
// 获取选中的分类值
var check_arr = []
$('input[name=category]:checked').each(function(){
check_arr.push($(this).val())
})
if(check_arr.length == 0){
layer.msg("还未选择分类", {icon: 7, time:1500})return
}
layui的所有图标全部采用字体形式(单一色彩),取材于阿里巴巴的矢量图标库。
通过对一个内联元素(一般使用的是i标签),设定 class=="layui-icon" ,来定义一个图标,然后对元素加上图标对应的 font-class ,即可显示出对应的图标。
向任意HTML元素设定 class="layui-btn" ,建立一个基础按钮,通过追加格式为 layui-btn-{type} 的class来定义其他按钮风格,内置的按钮class可以进行任意组合,从而形成更多风格的按钮,所有的按钮统一使用 button 标签来实现。不要使用input下的 type="button" 。
新建button元素,然后在元素上加上 layui-btn 的类名
select内option的第一项主要是占个坑,让form模块预留“请选择”的提示空间,否则将会把第一项(存在value值)作为默认的选中项。
原生的select option元素无法装饰,因此所有UI框架都是采用的元素模拟的方式来实现,即将原生的select元素隐藏,用js生成其他并设置样式,所以需要在网页上激活UI框架的渲染功能。
optgroup标签给select分组,每个分组的提示信息由optgroup元素的label属性的值决定的。
layui的复选框组件中,title是设定元素的名称,一般用于checkbox、radio框, lay-skin: 定义checkbox元素的风格,不设置为默认风格,primary为原始风格。
当 lay-skin 的值为switch时,title的文字失效,开关前后的状态显示的文字由 lay-text 内决定,格式为:选中提示文字|未选中提示文字。
title:设定的元素名称,一般用于checkbox、radio框。
layui框架使用js生成了一个div结构用来展示title标签的文字和模拟选中时的logo效果,而原生的input元素则被隐藏掉,disabled开启禁用,设置value来实现自定义的值,否则选中时返回的就是默认的on.
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)