jQuery pour les débutants (Partie 6) – Interface utilisateur jQuery et lectures complémentaires
Dans la dernière leçon de la série de didacticiels jQuery for Beginners, nous présenterons brièvement jQuery UI – le plug-in jQuery le plus largement utilisé pour ajouter des interfaces utilisateur graphiques aux applications Web. Des superbes formulaires et effets visuels aux widgets, spinners et boîtes de dialogue déplaçables, l’interface utilisateur jQuery vous permet de créer des interfaces utilisateur Web riches.
dans notre dernière leçon jQuery pour les débutants Série de tutoriels, nous couvrirons brièvement Interface utilisateur jQuery – Le plugin jQuery le plus largement utilisé pour ajouter des interfaces utilisateur graphiques aux applications Web. Des superbes formulaires et effets visuels aux widgets, spinners et boîtes de dialogue déplaçables, l’interface utilisateur jQuery vous permet de créer des interfaces utilisateur Web riches.
Si vous ne l’avez pas déjà fait, assurez-vous de lire notre précédente série d’articles :
Qu’est-ce que jQuery UI et pourquoi devrais-je l’utiliser ?
jQuery UI vous offre tous les composants dont vous avez besoin pour une application Web moderne avec une interface graphique. Pour une meilleure description, c’est une collection de widgets.
Pour voir rapidement ce que vous pouvez en faire, parcourez simplement ce qu’il y a sur PCPC.Chez nous, le contenu est vraiment juste séparé div Utilisez une liste non ordonnée comme index. Exécutez la fonction d’onglets jQuery dessus et ils se transforment comme par magie en onglets. Étonnant! Vous pouvez même charger le contenu de l’onglet via AJAX si nécessaire.
Faire une vidéo du jour
La page bonus utilise également une boîte de dialogue « popup modale » pour confirmer l’action de l’utilisateur et renvoyer un message. Pour attirer l’attention de l’utilisateur, vous pouvez faire en sorte que la boîte de dialogue assombrit le reste du contenu de la page jusqu’à ce que l’interaction soit terminée.
Sur notre site Answers, nous utilisons le simple info-bulle Fournit la fonction des invites de bouton.
jQuery UI excelle vraiment avec les formulaires, avec accès à une tonne de curseurs et de sélecteurs.je suis sélecteur de date Le widget moi-même, vous pouvez le charger au-dessus d’une zone de saisie de texte normale dans laquelle l’utilisateur doit saisir une date.
Ca a l’air compliqué non ? Pouvez-vous imaginer écrire un code similaire en JavaScript pur ? Voici comment utiliser l’interface utilisateur jQuery :
$(« #champdate »).datepicker();
Je ne prendrai pas le temps d’expliquer à quel point c’est génial, car la démo officielle de l’interface utilisateur jQuery donne un bon aperçu de toutes les fonctionnalités disponibles ainsi que des exemples de code simples. Allez le lire.
Ajouter l’interface utilisateur jQuery
Le moyen le plus simple de démarrer avec jQuery UI est d’ajouter les lignes suivantes à votre en-tête – mais assurez-vous d’ajouter ces lignes après la référence jQuery principale, car jQuery UI nécessite que jQuery soit préchargé.Vous avez besoin d’une référence au script du plugin et feuille de style Contient des descriptions visuelles de ces éléments d’interface utilisateur.
