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">
  </ディビジョン>
</フォーム>

自分で試してみる

使用下列属性来规定限定：

  • 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>
      <オプション value="オフ">オフ</オプション>
    </セレクト>
  </ディビジョン>
</フォーム>

自分で試してみる

ヒント：「選択済み」属性を使用して、オプションの1つをプレセレクト（ハイライト）に設定してください：

例

<オプション value="オフ">オフ</オプション> 選択済み>オフ</オプション>

自分で試してみる