对layui中表单元素的使用详解


Posted in Javascript onAugust 15, 2018

首先不管是单选框还是复选框或者是下拉框,都要在你写的标签外面套一层div或者是form标签,如:

<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
</div>,class属性是固定写法。

这样写好了以后,你如果是写在静态页面,这样式可以看见效果,如果写在js里,这样写了还有一步得写,那就是

var form = layui.form();
form.render("select"); //更新全部

这样写是外面套的是form标签,如果是div,就写layui.div();即可。

对于下拉框的事件的使用,语法form.on('event(过滤器值)', callback);

也可写成

var form=layui.form();

form.on('select(addywlb)', function(data){}),这里面的选中的值可以直接data.value;关于data里的数据结构,感兴趣可以console.log(data);打印出看看。获取选中的其他的属性值,和普通的用法一样,$("#cxYearBegin option:selected").attr("year");对了,关于select()括号里的值是这样来的 <select name="modules" lay-verify="required" lay-filter="cxYearBegin" lay-search="" id="cxYearBegin" >,根据这个lay-filter属性来获取。

如果是复选框的事件,就可以这样写

form.on('checkbox(filter)', function(data){});

如果是单选按钮是这样写:

form.on('radio(filter)', function(data){});

如果是开关按钮,事件是一样的:

form.on('switch(filter)', function(data){});

其中括号里的值都是通过lay-filter这个属性值来获取。

以上这篇对layui中表单元素的使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页中CDATA标记的说明
Sep 12 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 #jQuery
vue生命周期实例小结
Aug 15 #Javascript
layui获取多选框中的值方法
Aug 15 #Javascript
layui radio性别单选框赋值方法
Aug 15 #Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 #Javascript
LayUI表格批量删除方法
Aug 15 #Javascript
layui中table表头样式修改方法
Aug 15 #Javascript
You might like
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python and、or以及and-or语法总结
2015/04/14 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python制作简易注册登录系统
2016/12/15 Python
python 二维数组90度旋转的方法
2019/01/28 Python
Python Collatz序列实现过程解析
2019/10/12 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
python 发送get请求接口详解
2020/11/17 Python
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
计算机专业毕业生自荐信范文
2014/03/06 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
三方股东合作协议书
2014/10/28 职场文书
党支部半年考察意见
2015/06/01 职场文书
学校证明范文
2015/06/24 职场文书
六一亲子活动感想
2015/08/07 职场文书
教师病假条范文
2015/08/17 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏