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=https://www.itread01.com/jquerymobile/"50" min="0" max="100">
</form>

嘗試一下 ?

使用以下屬性來規定限制：

  • max - 規定允許的最大值
  • min - 規定允許的最小值
  • step - 規定合法的數字間隔
  • value - 規定預設值

提示: 如果你想在按鈕中顯示進度的值可以新增 data-show-value="https://www.itread01.com/jquerymobile/true" 屬性:

例項

<input type="range" data-show-value=https://www.itread01.com/jquerymobile/"true">

嘗試一下 ?

提示: 如果你想在滑動按鈕上顯示進度（類似一個小彈窗）可以使用 data-popup-enabled="true" 屬性:

例項

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

嘗試一下 ?

提示：如果您想要高亮突出顯示滑動條的值，請新增 data-highlight="true"：

例項

<input type="range" data-highlight="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>

嘗試一下 ?
例項

更多例項

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

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