Latest web development tutorials

jQuery Mobile Slider-Form

jQuery Mobile Schieberegler

Slider ermöglicht es Ihnen, einen Wert aus einer Reihe von Zahlen zu wählen:


Um einen Schieberegler zu erstellen, verwenden Sie die <input type = "Bereich">:

Beispiele

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

Versuchen »

Verwenden Sie die folgenden Attribute Einschränkungen angeben:

  • max - das Maximum von Bestimmungen zulässig
  • min - das Minimum von Bestimmungen zulässig
  • Schritt - gibt die gesetzlichen Nummernintervalle für
  • Wert - der Standardwert angegeben

Tipp: Wenn Sie in der Schaltfläche angezeigt werden können , den Wert des Fortschritts der Daten-show-value = "true hinzufügen " Attribut:

Beispiele

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

Versuchen »

Tipp: Wenn Sie den Fortschritt auf der Schiebetaste (ähnlich spielen ein kleines Fenster) zeigen möchten Sie die Daten verwenden können-Popup-enabled = "true " Attribut:

Beispiele

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

Versuchen »

Tipp: Wenn Sie den Wert des markierten Schieberegler zu markieren, Daten-Highlight hinzufügen = "true":

Beispiele

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

Versuchen »

Kippschalter

Die Schwankungen der Schalter normalerweise dient zum Ein- / Aus-oder wahr / falsch-Taste:


Wir können die <input type = "checkbox"> verwenden Elemente und geben Sie die Daten-Rolle um den Schalter zu schaffen ist "Flipswitch":

Beispiele

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

Versuchen »

Standardmäßig wird der Text-Schalter auf "On" und "Off". Sie können die Daten-on-Text und Daten-off-Text Eigenschaften, ihn zu ändern verwenden:

Beispiele

<Input type = "Checkbox" Daten -role = "Flipswitch" name = "Schalter" id = "Schalter" Data-on-text = "True" Daten-off-text = "false">

Versuchen »

Tipp: Sie können die Switch - Box "geprüft" verwenden Attribut die Standardoption zu setzen:

Beispiele

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

Versuchen »

Beispiele

Weitere Beispiele

Interval Schieber
Machen Sie ein Dia Intervallwerte.

Slider - Stile
Stellen Sie den Stil auf den Schiebeschalter.