jQuery Mobile 滑塊控件
滑塊允許您從一定范圍內的數字中選取值:
如需創建滑塊,請使用 <input type="range">:
實例
<form method="post" action="demoform.asp"> <div data-role="fieldcontain"> <label for="points">Points:</label> <input type="range" name="points" id="points" value="50" min="0" max="100"> </div> </form>
親自試一試
使用下列屬性來規定限定:
- max - 規定允許的最大值
- min - 規定允許的最小值
- step - 規定合法的數字間隔
- value - 規定默認值
提示:如果您希望突出顯示截止滑塊值的這段軌道,請添加 data-highlight="true":
實例
<input type="range" data-hightlight="true"
>
親自試一試
切換開關
切換開關常用于開/關或對/錯按鈕:
如需創建切換,請使用 data-role="slider" 的 <select> 元素,并添加兩個 <option> 元素:
實例
<form method="post" action="demoform.asp"> <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" 屬性來把選項之一設置為預選(突出顯示):
實例
<option value="off" selected
>Off</option>
親自試一試