最新的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 >
試一試»

更多示例

範圍滑塊
如何使一個滑塊與兩個手柄,允許用戶指定的範圍內的最小值和最大值。

風格輕觸開關
如何使翻轉開關更寬。