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>
亲自试一试