最新的Web开发教程
 

jQuery Mobile表单滑动条


jQuery Mobile的滑块控件

滑块允许你从一系列数字中选择一个值:

要创建一个滑块,使用<input type="range">

<form method="post" action="demoform.asp">
  <label for="points">Points:</label>
  < input type="range" name="points" id="points" value="50" min="0" max="100">
</form>
试一试»

使用以下属性来指定限制:

  • max -指定允许的最大值
  • min -指定允许的最小值
  • step -指定合法的数字间隔
  • value -指定缺省值

提示:如果你想显示滑块键的值,加data-show-value="true"

<input type="range" data-show-value="true" >
试一试»

提示:如果您想将值弹出你的屏幕就像一个工具提示上(如你滑动),添加data-popup-enabled="true"

<input type="range" data-popup-enabled="true" >
试一试»

提示:如果您想选取曲目多达滑块值,添加data-highlight="true"

<input type="range" data-highlight="true" >
试一试»

翻转拨动开关

倒装开关通常用于开/关或真/假按钮:

要创建一个翻转开关,使用<input type="checkbox">并指定data-role"flipswitch"

<form method="post" action="demoform.asp">
  <label for="switch">Flip toggle switch checkbox:</label>
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>
试一试»

默认情况下,翻转开关上的文字是"On""Off" 。 使用data-on-textdata-off-text属性更改此:

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False" >
试一试»

提示:使用"checked"属性来设置的选项之一预先选定:

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked >
试一试»

更多示例

范围滑块
如何使一个滑块与两个手柄,允许用户指定的范围内的最小值和最大值。

风格轻触开关
如何使翻转开关更宽。