对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 相关文章推荐
javascript GUID生成器实现代码
Oct 31 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
Sanic框架路由用法实例分析
2018/07/16 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
车间机修工岗位职责
2014/02/28 职场文书
植物生产学专业求职信
2014/08/08 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
Android studio 简单计算器的编写
2022/05/20 Java/Android
Python四款GUI图形界面库介绍
2022/06/05 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS