jQuery Mobile Curseur de formulaire
Contrôle du curseur jQuery Mobile
Le curseur vous permet de sélectionner une valeur dans une plage de nombres :
Pour créer un curseur, utilisez <input type="range"> :
Exemple
<label for="points">Progression :</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
</form>
Essayez-le vous-même »
Utilisez les attributs suivants pour spécifier les limites :
- max - Spécifie la valeur maximale autorisée
- min - Spécifie la valeur minimale autorisée
- step - Spécifie les intervalles numériques autorisés
- value - Spécifie la valeur par défaut
Astuce :Si vous souhaitez afficher la valeur de progression sur le bouton, vous pouvez ajouter l'attribut data-show-value="true" :
Astuce :Si vous souhaitez afficher la progression sur le bouton du curseur (comme une petite fenêtre contextuelle), vous pouvez utiliser l'attribut data-popup-enabled="true" :
Astuce :Si vous souhaitez mettre en évidence la valeur du curseur, ajoutez data-highlight="true" :
Interrupteur à bascule
Les interrupteurs à bascule sont couramment utilisés pour des boutons marche/arrêt ou vrai/faux :
Nous pouvons utiliser un élément <input type="checkbox"> et spécifier data-role comme "flipswitch" pour créer un interrupteur à bascule :
Exemple
<label for="switch">Interrupteur à bascule :</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>
Essayez-le vous-même »
Par défaut, le texte de l'interrupteur à bascule est « On » et « Off ». Vous pouvez le modifier à l'aide des attributs data-on-text et data-off-text :
Exemple
Essayez-le vous-même »
Astuce :La case à cocher à bascule peut utiliser l'attribut "checked" pour définir l'option par défaut :
Exemple
Essayez-le vous-même »
Plus d’exemples
Créez un curseur avec une plage de valeurs.
Définissez les styles pour l'interrupteur à bascule du curseur.