Neueste Web-Entwicklung Tutorials
 

jQuery Mobile Formular Schieber

❮ Zurück Weiter Kapitel ❯

jQuery Mobile Slider Kontrollen

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

Um einen Schieberegler zu erstellen, verwenden <input type="range"> :

Beispiel

<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>
Versuch es selber "

Verwenden Sie die folgenden Attribute Einschränkungen angeben:

  • max - gibt den maximal zulässigen Wert
  • min - gibt den Minimalwert erlaubt
  • step - gibt die gesetzlichen Nummernintervalle
  • value - gibt den Standardwert

Tipp: Wenn Sie den Wert auf dem Schieberegler angezeigt werden soll, fügen Sie data-show-value="true" :

Beispiel

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

Tipp: Wenn Sie auf den Wert wollen auf Ihrem Bildschirm um Pop - up wie ein Tooltip (wie Sie schieben), fügen data-popup-enabled="true" :

Beispiel

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

Tipp: Wenn Sie möchten , um den Titel zu markieren bis zum Reglerwert, fügen Sie data-highlight="true" :

Beispiel

<input type="range" data-highlight="true" >
Versuch es selber "

Flip-Kippschalter

Ein Flip-Schalter wird oft für Ein / Aus oder wahr / falsch Tasten verwendet:

Um einen Flip - Schalter zu erstellen, verwenden <input type="checkbox"> und geben Sie eine data-role von "flipswitch" :

Beispiel

<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>
Versuch es selber "

Standardmäßig ist der Text auf dem Flip - Schalter "On" und "Off" . Verwenden Sie die data-on-text und data-off-text , dies zu ändern Attribute:

Beispiel

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False" >
Versuch es selber "

Tipp: Mit der "checked" Attribut eine der Optionen einstellen vorselektiert werden:

Beispiel

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

Mehr Beispiele

Bereich Schieber
Wie ein Schieber mit zwei Handgriffen zu machen, so dass Anwender einen minimalen und maximalen Wert in einem Bereich zu spezifizieren.

Art - Schlag - Schalter
Wie der Flip-Schalter breiter zu machen.


❮ Zurück Weiter Kapitel ❯