对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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
传智播客学习之java 反射
Nov 22 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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生成静态页面详解
2006/11/19 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
学习python (2)
2006/10/31 Python
numpy中的高维数组转置实例
2018/04/17 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
django_orm查询性能优化方法
2018/08/20 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
django迁移文件migrations的实现
2020/03/31 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
国家励志奖学金获奖感言
2014/01/09 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
后备干部推荐材料
2014/12/24 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js