上一期,阿牛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>保存</button>
<button type="reset">返回</button>
</div>
一行多列
效果圖:
代碼如下:
<div>
<label>縮略大圖(單位:px)</label>
<div>
<div>寬</div>
<div>
<input name="thumb_big_width" type="number" lay-verify="int">
</div>
<div>高</div>
<div>
<input name="thumb_big_height" type="number" lay-verify="int">
</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>
你學會了嗎?關注我,分享更多開發代碼小知識!