Latest web development tutorials

jQueryのモバイルスライダーフォーム

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

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


スライダーを作成するには、<入力タイプ= "範囲">を使用します。

<form method="post" action="demoform.php">
  <label for="points">进度:</label>
  < input type="range" name="points" id="points" value="50" min="0" max="100">
</form>

»をお試しください

制限を指定するには、次の属性を使用します。

  • 最大 - 規制によって許容される最大
  • 分 - 規制によって許容される最小
  • ステップ - のための法的な数の間隔を指定します
  • 値 - 指定されたデフォルト値

ヒント:データ・ショー値=「真の進捗状況の値を追加することができ、ボタンで表示したい場合は、「属性を:

<input type="range" data-show-value="true" >

»をお試しください

ヒント:あなたはあなたがデータ-ポップアップ有効= "trueを使用することができます(小さなウィンドウを再生するに似ている)スライドボタンの進捗状況表示したい場合は、「属性を:

<input type="range" data-popup-enabled="true" >

»をお試しください

ヒント:あなたは、強調表示されたスライダーの値を強調表示し、データのハイライトを追加したい場合は= "true"を:

<input type="range" data-hightlight="true" >

»をお試しください

トグルスイッチ

変動は、通常のオン/オフまたは真/偽ボタンに使用されるスイッチ:


「flipswitchは、 "我々は、<="チェックボックス "を入力タイプ>を使用要素を、スイッチを作成するために、データのロールを指定することができます:

<form method="post" action="demoform.php">
  <label for="switch">切换开关:</label>
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>

»をお試しください

デフォルトでは、「オン」と「オフ」にテキストスイッチ。 あなたはそれを修正するために、データ・オン・テキストとデータオフテキストのプロパティを使用することができます。

<input type = "チェックボックス"のデータが= "flipswitch"名前= "スイッチ" ID = "スイッチ"データ・オン・テキストは= "真"データオフテキスト= "False"に-Role>

»をお試しください

ヒント:デフォルトのオプションを設定する属性」をチェック」スイッチボックスを使用することができます。

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked >

»をお試しください

例

より多くの例

間隔スライダー
スライド間隔値を作成します。

スライダーのスタイル
スライダースイッチにスタイルを設定します。