免費(fèi)AI編程助手
jQuery Mobile 表單滑動(dòng)條
2018-02-03 14:59 更新
jQuery Mobile 表單滑動(dòng)條
jQuery Mobile表單滑動(dòng)條可以用來控制進(jìn)度。
jQuery Mobile 滑動(dòng)條控件
滑動(dòng)條允許您從一個(gè)范圍的數(shù)字中選擇一個(gè)值：
如需創(chuàng)建滑動(dòng)條，請(qǐng)使用 <input type="range">：
實(shí)例
<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ī)定默認(rèn)值
提示：如果您想要高亮突出顯示滑動(dòng)條的值，請(qǐng)?zhí)砑?data-highlight="true"：
撥動(dòng)開關(guān)
波動(dòng)開關(guān)通常用于 on/off 或 true/false 按鈕：
如需創(chuàng)建一個(gè)開關(guān)，請(qǐng)把 <select> 元素與 data-role="slider" 一起使用，并添加兩個(gè) <option> 元素：
實(shí)例
<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>
嘗試一下 ?
提示：請(qǐng)使用 "selected" 屬性來設(shè)置選項(xiàng)中的一個(gè)為預(yù)選中狀態(tài)（高亮突出顯示狀態(tài)）：
現(xiàn)在，你可以使用本節(jié)學(xué)習(xí)到的jQuery Mobile表單滑動(dòng)條來為創(chuàng)建的表單添加效果了！
以上內(nèi)容是否對(duì)您有幫助：
更多建議：