jQuery Mobile 表單 - 滑塊

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>

親自試一試