ENS 域名注册表智能合约(ENSRegistry.sol)解析
弹层layer下拉框没有样式_不可点击_没有效果_渲染失效的解决办法
一、必须给表单体系所在的父元素加上 class=”layui-form“
在一个容器中设定 class=”layui-form” 来标识一个表单元素块,如果你不想用 form,你可以换成 div 等任何一个普通元素;记得要在 外层容器 中定义 class=”layui-form”,form 模块才能正常工作。
<form class="layui-form"> <!-- 这里是form里面的代码 输入框,选择框、复选框,单选框等等 --> </form>
二、调用依赖加载模块:form
当你使用表单时,layui 会对 select、checkbox、radio 等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于 form 组件,所以你必须加载 form,并且执行一个实例;
SQL Server2012高可用之事物复制(发布订阅)测试
layui.use('form', function(){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 //…… //但是,如果你的HTML是动态生成的,自动渲染就会失效 //因此你需要在相应的地方,执行下述方法来进行渲染 form.render(); });
三、更新渲染
有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然 layui 不支持双向绑定机制,但没有关系,你只需要执行 form.render(type, filter); 方法即可。
第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:
参数(type)值 | 描述 |
---|---|
select | 刷新select选择框渲染 |
checkbox | 刷新checkbox复选框(含开关)渲染 |
radio | 刷新radio单选框框渲染 |
form.render(); //更新全部 form.render('select'); //刷新select选择框渲染 //……
第二个参数:filter,为 class=”layui-form” 所在元素的 lay-filter=”” 的值。你可以借助该参数,对表单完成局部更新。
<!-- HTML 示例 --> <div class="layui-form" lay-filter="test1"> … </div> <div class="layui-form" lay-filter="test2"> … </div> <!-- JS 示例 --> <script> layui.use('form', function(){ var form = layui.form, form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态 form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态 //…… }); </script>
四、弹层中同样的原理,需要更新渲染
<div id="layer-test" style="display: none;"> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">复选框</label> <div class="layui-input-block"> <input type="checkbox" name="CSDN" lay-filter="like" title="复选框一" value="dongsir"> <input type="checkbox" name="CSDN" lay-filter="like" title="复选框二" value="董先生"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">开关关</label> <div class="layui-input-block"> <input type="checkbox" name="switch" lay-skin="switch" value="董辉"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">开关开</label> <div class="layui-input-block"> <input type="checkbox" name="switch" checked lay-skin="switch" value="董先生的CSDN"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="*">立即提交</button> </div> </div> </form> </div> <script src="layui/layui.js"></script> <script> layui.use('form', function(){ var form = layui.form, $ = layui.$; //layer示例 layer.open({ type: 1, title: ['董先生的CSDN博客'], shade: 0.4, area:['900px', '650px'], content: $("#layer-test").html(), success: function(layero, index){ form.render(); } }); }); </script>
《提升能力,涨薪可待》—Java并发之Synchronized