jQueryモバイルフォームスライダー
jQueryモバイルスライダーコントロール
スライダーを使用すると、数値範囲から値を選択できます。
スライダーを作成するには、<input type="range"> を使用します。
制限を指定するには、次の属性を使用します。
-
max - 最大許容値を指定します
-
min - 許可される最小値を指定します
-
step - 有効な数字の間隔を指定します
-
value - デフォルト値を指定します
ヒント: ボタンに進行状況の値を表示したい場合は、次の値を追加できます。 data-show-value="true" 属性:
ヒント: スライド ボタン (小さなポップアップ ウィンドウに似たもの) に進行状況を表示したい場合は、次のコマンドを使用できます。 data-popup-enabled="true" 属性:
ヒント: スライダーの値を強調表示したい場合は、data-highlight="true" を追加します。
トグルスイッチ
トグル スイッチは通常、オン/オフまたは true/false ボタンに使用されます。
<input type="checkbox"> 要素を使用して、data-role を指定できます。 「flipswitch」でスイッチを作成します。
デフォルトでは、切り替えテキストは「オン」と「オフ」です。使用できます data-on-text 属性と data-off-text 属性を使用して変更します。
ヒント: スイッチのチェックボックスでは、「checked」属性を使用してデフォルトのオプションを設定できます。
他の例
レンジスライダー
間隔値を指定したスライダーを作成します。
スライダースタイル
スライダースイッチのスタイルを設定します。
