formateur informatique

Listes descendantes et ascendantes, contrôle Spinner

Accueil  >  Technique  >  Javascript  >  Javascript Astuces  >  Listes descendantes et ascendantes, contrôle Spinner
Livres à télécharger


Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Inscription Newsletter    Abonner  Youtube    Vidos astuces Instagram
Sujets que vous pourriez aussi aimer :


Liste de choix Haut-Bas

Pour des raisons d'ergonomie et de rapidité dans les démarches de renseignements d'un formulaire, il existe des contrôles spécifiques. Ils permettent de définir une valeur numérique par incréments ou décréments successifs, aux clics sur des boutons ou des flèches.

Contrôles spinner JQuery

Dans l'exemple illustré par la capture, l'utilisateur clique sur la partie supérieure ou inférieure de chacun des trois contrôles proposés, pour augmenter ou diminuer la valeur numérique suggérée par défaut. C'est ainsi qu'il répond rapidement aux questions sans intervenir au clavier. Ces éléments Html ont été transformés en contrôles spécifiques grâce au JQuery. En américain, on les appelle des contrôles Spinner.



Sources Html, JQuery et CSS à télécharger
Pour démontrer cette nouvelle astuce, nous proposons de récupérer une construction Html existante, offrant ces éléments déjà organisés mais à transformer. Nous découvrons le fichier de la page Web. Il est nommé index.htm. Il est accompagné des librairies JQuery dans le sous dossier Js et des styles CSS dans le sous dossier Css.
  • Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur Web par défaut,
Zones de texte Html à transforme en Spinner (Listes de choix) JQuery

Comme vous pouvez le voir, la présentation diffère quelque peu par rapport à celle proposée par la solution aboutie. Pour l'instant, en guise de listes de choix numériques, ce sont de simples zones de saisies (Contrôles Input) qui sont proposés.



L'organisation Html de la page Web
Pour comprendre la construction livrée, nous proposons d'accéder à la structure Html de la page Web.
  • A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
  • Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,
Naturellement, les feuilles de styles et les librairies JQuery sont déclarées en entête du code Html, soit dans la section Head :

...
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/mes-styles.css">
<link rel="stylesheet" href="css/les-styles.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>

</head>
<body>
...


Les zones de texte accompagnées de leurs étiquettes sont agencées plus bas dans le code, plus précisément dans un calque d'identifiant auCentre:

...
<div id="auCentre">
<div style="width:300px;margin:auto;">
<div class="choix">
<input id="age" value="20">
<label for="age"> : Votre âge</label>
</div>


<div class="choix">
<input id="nbFS" class="choix" value="2">
<label for="nbFS"> : Nb. Frêres et Soeurs</label>
</div>


<div class="choix">
<input id="nf" class="choix" value="7">
<label for="nf"> : Votre numéro fétiche</label>
</div>

</div>
</div>
...


Des valeurs par défaut (attribut value) sont effectivement définies pour chaque zone de saisie. Ces zones de texte à transformer en contrôles Spinner portent les identifiants respectifs suivants : age, nbFS et nf. Dans tout langage de programmation et comme vous le savez, c'est par leurs noms que nous pouvons piloter les objets.



Contrôle Spinner
Contrairement au volet précédent sur la construction d'une palette de couleurs, nous allons le voir, une seule méthode JQuery à appliquer sur les contrôles, suffit à aboutir la solution. Certes et comme nous le répétons à chaque occasion, ces méthodes engagent des styles CSS associés qui gèrent les apparences et comportements. Mais ces styles sont livrés avec ces librairies JQuery. Une fois déclarés en entête de la page Html, nous n'avons plus qu'à les exploiter tels quels et en toute transparence pour le développeur.
  • Dans la section de script en bas de la page Html, ajouter l'instruction JQuery suivante :
...
<script type="text/javascript" language="javascript">

$("#age, #nbFS, #nf").spinner();

</script>
...


Et c'est tout ! Une seule ligne suffit. Notez néanmoins la construction intéressante que nous avons découverte à l'occasion du volet précédent. Grâce à l'alias du dollar, nous prenons possession des trois zones de texte ensemble. Leurs identifiants, tous préfixés d'un dièse, sont énumérés dans les mêmes parenthèses. Et c'est alors la méthode JQuery spinner qui leur est appliquée à tous.
  • Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Web (ALT + Tab),
  • Puis, Rafraîchir la page Html avec la touche F5 du clavier,
Listes de choix Haut et Bas en Javascript et JQuery

Comme vous pouvez le voir, l'aspect des trois contrôles a considérablement changé. Et désormais, de simples impulsions sur la partie supérieure ou inférieure de la zone grisée, permettent d'augmenter ou de diminuer la valeur contenue dans la zone. Vous pouvez même laisser le bouton de la souris enfoncé pour aller plus vite.

 
Sur Facebook
Sur Youtube
Les livres
Contact
Mentions légales



Abonnement à la chaîne Youtube
Partager la formation
Partager sur Facebook
Partager sur Twitter
Partager sur LinkedIn