最新のWeb開発のチュートリアル
 

jQuery Mobileフォームスライダー


jQueryのモバイルスライダーコントロール

スライダーを使用すると、番号の範囲から値を選択することができます:

スライダーを作成するには、使用<input type="range">

<form method="post" action="demoform.asp">
  <label for="points">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-highlight="true" >
»それを自分で試してみてください

フリップトグルスイッチ

フリップスイッチは、多くの場合、オン/オフまたは真/偽のボタンにするために使用されます。

フリップスイッチを作成するには、使用<input type="checkbox">と指定したdata-role"flipswitch"

<form method="post" action="demoform.asp">
  <label for="switch">Flip toggle switch checkbox:</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 >
»それを自分で試してみてください

その他の例

範囲スライダ
どのようにユーザーが範囲の最小値と最大値を指定することができ、二つのハンドルとスライダーを作ります。

スタイルフリップスイッチ
どのようにフリップスイッチが広いようにします。