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

 更新时间:2018年08月15日 10:51:06   作者:荣默默  
今天小编就为大家分享一篇对layui中表单元素的使用详解。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

首先不管是单选框还是复选框或者是下拉框,都要在你写的标签外面套一层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中表单元素的使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 如何手动实现es5中的bind方法详解

    如何手动实现es5中的bind方法详解

    这篇文章主要给大家介绍了关于如何手动实现es5中的bind方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面小编来一起学习学习吧
    2018-12-12
  • 详解JavaScript中的4种类型识别方法

    详解JavaScript中的4种类型识别方法

    JavaScript中检测对象类型的运算符有:typeof、instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串。下面由小编给大家分享JavaScript中的4种类型识别方法,需要的朋友可以参考下本文
    2015-09-09
  • JavaScript设计模式之命令模式

    JavaScript设计模式之命令模式

    这篇文章主要介绍了JavaScript设计模式之命令模式,命令设计模式是由发令者、执行者、命令对象三部分构成,文章由此展开详细的内容介绍,需要的小伙伴可以参考一下
    2022-06-06
  • 利用layer实现表单完美验证的方法

    利用layer实现表单完美验证的方法

    今天小编就为大家分享一篇利用layer实现表单完美验证的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js文字滚动停顿效果代码

    js文字滚动停顿效果代码

    javascript文字滚动停顿效果的实现代码
    2008-06-06
  • 详解javascript中的Error对象

    详解javascript中的Error对象

    error是指程序中的非正常运行状态,在其他编程语言中称为“异常”或“错误”,解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描述信息,这篇文章主要介绍了javascript中的Error对象,需要的朋友可以参考下
    2019-04-04
  • javascript 数据结构的题

    javascript 数据结构的题

    面试题是3个数据结构的题,可以用java/c/c++/python实现,靠,js也能实现,鄙视js?我上机就用js写的,虽说肯定没戏,但js我挺。
    2008-07-07
  • js parseInt的陷阱分析小结

    js parseInt的陷阱分析小结

    js parseInt的陷阱分析小结,当第一个字符为0时,Js会把它看成一个8进制数字,其他8进制之外的字符都回被忽略掉。
    2011-03-03
  • js实现截图保存图片功能的代码示例

    js实现截图保存图片功能的代码示例

    本篇文章主要介绍了js实现截图功能的代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • three.js实现3D视野缩放效果

    three.js实现3D视野缩放效果

    这篇文章主要为大家详细介绍了three.js实现3D视野缩放效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论