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>

본인이 직접 시도해 보세요