jQuery Mobile 表單滑動條
2018-02-03 14:59 更新
jQuery Mobile 表單滑動條
jQuery Mobile表單滑動條可以用來控制進度。
jQuery Mobile 滑動條控件
滑動條允許您從一個范圍的數(shù)字中選擇一個值：
如需創(chuàng)建滑動條，請使用 <input type="range">：
實例
<form method="post" action="demoform.html">
<div data-role="fieldcontain">
<label for="points">Points:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
</div>
</form>
<div data-role="fieldcontain">
<label for="points">Points:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
</div>
</form>
嘗試一下 ?
使用以下屬性來規(guī)定限制：
- max - 規(guī)定允許的最大值
- min - 規(guī)定允許的最小值
- step - 規(guī)定合法的數(shù)字間隔
- value - 規(guī)定默認值
提示：如果您想要高亮突出顯示滑動條的值，請?zhí)砑?data-highlight="true"：
撥動開關(guān)
波動開關(guān)通常用于 on/off 或 true/false 按鈕：
如需創(chuàng)建一個開關(guān)，請把 <select> 元素與 data-role="slider" 一起使用，并添加兩個 <option> 元素：
實例
<form method="post" action="demoform.html">
<div data-role="fieldcontain">
<label for="switch">Toggle Switch:</label>
<select name="switch" id="switch" data-role="slider">
<option value="on">On</option>
<option value="off">Off</option>
</select>
</div>
</form>
<div data-role="fieldcontain">
<label for="switch">Toggle Switch:</label>
<select name="switch" id="switch" data-role="slider">
<option value="on">On</option>
<option value="off">Off</option>
</select>
</div>
</form>
嘗試一下 ?
提示：請使用 "selected" 屬性來設(shè)置選項中的一個為預選中狀態(tài)（高亮突出顯示狀態(tài)）：
現(xiàn)在，你可以使用本節(jié)學習到的jQuery Mobile表單滑動條來為創(chuàng)建的表單添加效果了！
以上內(nèi)容是否對您有幫助：
更多建議：