上一期,阿牛ger与大家分享了创建表单的基本功能,调整表单宽度、表单输入框、表单必输标识、表单注释及复选框功能的添加代码,这一期,阿牛ger接着与大家分享Niushop开源商城表单开发那些事儿:
单选按钮
效果图:
代码如下:
<!-- 单选框 -->
<div>
<label>单选框</label>
<div>
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
注意:
checked 表示选中
开关按钮
效果图:
代码如下:
<!-- 开关按钮 -->
<div>
<label>开关关</label>
<div>
<input type="checkbox" value="1" lay-skin="switch">
</div>
</div>
表单展示
效果图:
代码如下:
<div>
<label>表单展示</label>
<div>
<p>2019-11-11 15:30:29</p>
</div>
</div>
表单 - 按钮
效果图:
代码如下:
<div>
<button class="layui-btn ns-bg-color">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">返回</button>
</div>
一行多列
效果图:
代码如下:
<div>
<label>缩略大图(单位:px)</label>
<div>
<div>宽</div>
<div>
<input name="thumb_big_width" type="number" lay-verify="int" class="layui-input ns-len-small">
</div>
<div>高</div>
<div>
<input name="thumb_big_height" type="number" lay-verify="int" class="layui-input ns-len-small">
</div>
</div>
</div>
手动触发select事件
layui没有封装手动触发select的事件,可以参考以下代码:
$("select[name='category']").siblings("div.layui-form-select").find("dl dd[lay-value='" + value + "']").click();
字段集区块
效果图:
代码如下:
<fieldset>
<legend>标题</legend>
<div>内容区域</div>
</fieldset>
你学会了吗?关注我,分享更多开发代码小知识!
来源:oschina
链接:https://my.oschina.net/u/4513508/blog/4838227