Niushop开源商城表单单选按钮、开关按钮及表单展示等开发代码

橙三吉。 提交于 2020-12-24 18:35:43

上一期,阿牛ger与大家分享了创建表单的基本功能,调整表单宽度、表单输入框、表单必输标识、表单注释及复选框功能的添加代码,这一期,阿牛ger接着与大家分享Niushop开源商城表单开发那些事儿:

 12.23.1.png

单选按钮

效果图:

 12.23.2.png

代码如下:

<!-- 单选框 -->

<div>

<label>单选框</label>

<div>

<input type="radio" name="sex" value="0" title="男">

<input type="radio" name="sex" value="1" title="女" checked>

</div>

</div>

注意:

    checked 表示选中

开关按钮

效果图:

12.23.3.png 

代码如下:

<!-- 开关按钮 -->

<div>

<label>开关关</label>

<div>

<input type="checkbox" value="1" lay-skin="switch">

</div>

</div>

表单展示

效果图:

12.23.4.png 

代码如下:

<div>

<label>表单展示</label>

<div>

<p>2019-11-11 15:30:29</p>

</div>

</div>

表单 - 按钮

效果图:

12.23.5.png 

代码如下:

<div>

<button class="layui-btn ns-bg-color">保存</button>

<button type="reset" class="layui-btn layui-btn-primary">返回</button>

</div>

一行多列

效果图:

12.23.6.png 

代码如下:

<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();

 

字段集区块

效果图:

12.23.7.png 

代码如下:

<fieldset>

<legend>标题</legend>

<div>内容区域</div>

</fieldset>

你学会了吗?关注我,分享更多开发代码小知识!

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!