Derniers tutoriels de développement web
 

jQuery Mobile Formulaire curseur

❮ Précédent Suivant Chapitre ❯

Contrôles jQuery Mobile Curseur

Un curseur permet de sélectionner une valeur à partir d'une plage de numéros:

Pour créer un curseur, utilisez <input type="range"> :

Exemple

<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>
Essayez - le vous - même »

Utilisez les attributs suivants pour spécifier des restrictions:

  • max - spécifie la valeur maximale autorisée
  • min - spécifie la valeur minimale autorisée
  • step - spécifie les intervalles de numéros juridiques
  • value - spécifie la valeur par défaut

Astuce: Si vous voulez afficher la valeur sur le bouton de curseur, ajouter des data-show-value="true" :

Exemple

<input type="range" data-show-value="true" >
Essayez - le vous - même »

Astuce: Si vous voulez la valeur pour faire apparaître sur votre écran comme une infobulle (que vous faites glisser), ajouter des data-popup-enabled="true" :

Exemple

<input type="range" data-popup-enabled="true" >
Essayez - le vous - même »

Astuce: Si vous voulez mettre en évidence la piste jusqu'à la valeur du curseur, ajouter des data-highlight="true" :

Exemple

<input type="range" data-highlight="true" >
Essayez - le vous - même »

Retourner à bascule

Un interrupteur à bascule est souvent utilisé pour le / vrai ou faux boutons / hors tension ou:

Pour créer un flip switch, utiliser <input type="checkbox"> et spécifiez un data-role de "flipswitch" :

Exemple

<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>
Essayez - le vous - même »

Par défaut, le texte sur le commutateur à bascule est "On" et "Off" . Utilisez les data-on-text le data-off-text data-on-text et de data-off-text attribue à changer cela:

Exemple

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False" >
Essayez - le vous - même »

Astuce: Utilisez le "checked" attribut pour définir l' une des options pour être pré-sélectionné:

Exemple

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked >
Essayez - le vous - même »

Autres exemples

Range curseur
Comment faire un curseur avec deux poignées, ce qui permet aux utilisateurs de spécifier une valeur minimale et maximale dans une plage.

Changer de style flip
Comment faire le commutateur à bascule plus large.


❮ Précédent Suivant Chapitre ❯