Schieberegler in jQuery Mobile

jQuery Mobile Schieberegler-Kontrollleiste

Schieberegler ermöglichen es Ihnen, einen Wert aus einem bestimmten Bereich auszuwählen:

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

Beispiel

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="points">Punkte:</label>
    <input type="range" name="points" id="points" value="50" min="0" max="100">
  </div>
</form>

Probieren Sie es selbst aus

Verwenden Sie die folgenden Attribute, um zu begrenzen:

  • max - legt den erlaubten Maximalwert fest
  • min - legt den erlaubten Minimalwert fest
  • step - legt den zulässigen numerischen Abstand fest
  • value - legt den Standardwert fest

Tipp:Fügen Sie data-highlight="true" hinzu, um die Spur bis zum Wert des abschließenden Schiebers hervorzuheben:

Beispiel

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

Probieren Sie es selbst aus

Schalter

Schalter werden oft für An/Aus- oder Ja/Nein-Schalter verwendet:

Um einen Schalter zu erstellen, verwenden Sie das <select>-Element mit data-role="slider" und fügen Sie zwei <option>-Elemente hinzu:

Beispiel

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="switch">Toggle Switch:</label>
    <select name="switch" id="switch" data-role="slider">
      <option value="on">On</option>
      <option value="off">Aus</option>
    </select>
  </div>
</form>

Probieren Sie es selbst aus

Tipp:Hinweis: Verwenden Sie das "selected"-Attribut, um eine Option als vorgewählt (hervorgehoben) zu setzen:

Beispiel

<option value="off" ausgewählt>Off</option>

Probieren Sie es selbst aus