对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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
vue 通过base64实现图片下载功能
Dec 19 Vue.js
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之Memcache学习笔记
2013/06/17 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
python的类方法和静态方法
2014/12/13 Python
python批量提取word内信息
2015/08/09 Python
Python用模块pytz来转换时区
2016/08/19 Python
python调用c++传递数组的实例
2019/02/13 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
python实现对输入的密文加密
2019/03/20 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
校友会欢迎辞
2014/01/13 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
投资入股合作协议书
2014/10/28 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
担保书格式范文
2015/09/22 职场文书
Python利用capstone实现反汇编
2022/04/06 Python