Barre de glisse jQuery Mobile

Contrôle glissant jQuery Mobile

Le curseur de glissement vous permet de choisir une valeur à partir d'une plage de nombres :

Pour créer un curseur de glissement, utilisez l'élément <input type="range"> :

Exemple

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

Essayez-le vous-même

Utilisez les attributs suivants pour définir les limites :

  • max - Définir la valeur maximale autorisée
  • min - Définir la valeur minimale autorisée
  • step - Définir l'intervalle numérique légal
  • value - Définir la valeur par défaut

Astuce :Si vous souhaitez mettre en valeur la piste de valeur du curseur de glissement, ajoutez data-highlight="true" :

Exemple

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

Essayez-le vous-même

Commutateur à bascule

Le commutateur à bascule est souvent utilisé pour les boutons allumé/éteint ou vrai/faux :

Pour créer un commutateur, utilisez l'élément <select> avec data-role="slider" et ajoutez deux éléments <option> :

Exemple

<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">Off</option>
    </select>
  </div>
</form>

Essayez-le vous-même

Astuce :Indiquez l'attribut "selected" pour mettre l'un des éléments en option préselectionnée (surligné) :

Exemple

<option value="off" sélectionné>Off</option>

Essayez-le vous-même