Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :
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.
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.
Puis, le décompresser dans le dossier de votre choix,
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,
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 :
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 :
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,
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.
★ Le saviez-vous ? La zone Cci des messages Outlook signifie Copie Carbone Invisible.