jQuery Mobile Formular-Slider
jQuery Mobile Slider-Steuerelement
Der Slider ermöglicht es Ihnen, einen Wert aus einem Zahlenbereich auszuwählen:
Um einen Slider zu erstellen, verwenden Sie <input type="range">:
Beispiel
<label for="points">Fortschritt:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
</form>
Selbst ausprobieren »
Verwenden Sie die folgenden Attribute, um Grenzwerte anzugeben:
- max - Gibt den maximal zulässigen Wert an
- min - Gibt den minimal zulässigen Wert an
- step - Gibt die zulässigen Zahlenintervalle an
- value - Gibt den Standardwert an
Tipp:Wenn Sie den Fortschrittswert auf dem Button anzeigen möchten, können Sie das Attribut data-show-value="true" hinzufügen:
Tipp:Wenn Sie den Fortschritt auf dem Schieberegler-Button (wie ein kleines Popup) anzeigen möchten, können Sie das Attribut data-popup-enabled="true" verwenden:
Tipp:Wenn Sie den Wert des Schiebereglers hervorheben möchten, fügen Sie data-highlight="true" hinzu:
Flip-Umschalter
Flip-Umschalter werden häufig für Ein/Aus- oder true/false-Schaltflächen verwendet:
Wir können ein <input type="checkbox">-Element verwenden und data-role als "flipswitch" angeben, um einen Umschalter zu erstellen:
Beispiel
<label for="switch">Umschalter:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>
Selbst ausprobieren »
Standardmäßig lautet der Text des Umschalters "On" und "Off". Sie können ihn mit den Attributen data-on-text und data-off-text ändern:
Beispiel
Selbst ausprobieren »
Tipp:Die Umschalt-Checkbox kann das Attribut "checked" verwenden, um die Standardoption festzulegen:
Beispiel
Selbst ausprobieren »
Weitere Beispiele
Erstellen Sie einen Schieberegler mit einem Wertebereich.
Legen Sie Stile für den Umschalter des Schiebereglers fest.