Latest web development tutorials

jQuery Mobile 表單滑動條

jQuery Mobile 滑動條控件

滑動條允許您從一個範圍的數字中選擇一個值:


如需創建滑動條,請使用<input type="range">:

實例

<form method="post" action="demoform.php">
  <label for="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-hightlight="true" >

嘗試一下»

撥動開關

波動開關通常用於on/off 或true/false 按鈕:


我們可以使用<input type="checkbox"> 元素並指定data-role 為"flipswitch" 來創建開關:

實例

<form method="post" action="demoform.php">
  <label for="switch">切换开关:</label>
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>

嘗試一下»

默認情況下,開關切換的文本為"On" 和"Off"。 你可以使用data-on-text 和data-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 >

嘗試一下»

實例

更多實例

區間滑塊
製作一個區間值的滑塊。

滑塊樣式
為滑塊開關設置樣式。