jQuery for Beginners (Part 6) - Interface utilisateur jQuery et lectures supplémentaires

Dans notre dernière leçon de cette jQuery pour les débutants série de tutoriels, nous allons jeter un bref regard sur jQuery UI - Le plug-in jQuery le plus utilisé pour l'ajout d'interfaces utilisateur graphiques aux applications Web. Des formes fantaisistes aux effets visuels, en passant par les widgets, les fileuses et les boîtes de dialogue déplaçables, l'interface utilisateur de jQuery vous permet de créer des interfaces utilisateur Web riches.

Si vous ne l'avez pas déjà fait, assurez-vous de lire nos articles précédents de la série:

• Introduction: Qu'est-ce que jQuery et pourquoi vous en soucier? Rendre le Web interactif: Introduction à jQuery Rendre le Web interactif: Introduction à jQuery jQuery est une bibliothèque de scripts côté client utilisée par presque tous les sites Web modernes. Elle rend les sites Web interactifs. Ce n'est pas la seule bibliothèque Javascript, mais c'est la plus développée, la plus supportée et la plus utilisée… Lire la suite
• 1: Sélecteurs et bases Tutoriel jQuery - Mise en route: bases et sélecteurs Tutoriel jQuery - Mise en route: bases et sélecteurs La semaine dernière, j'ai expliqué à quel point jQuery est important pour tout développeur Web moderne et pourquoi il est génial. Cette semaine, je pense qu'il est temps de nous salir les mains avec du code et d'apprendre comment… Read More
• 2: Méthodes Introduction à jQuery (Partie 2): Méthodes et fonctions Introduction à jQuery (Partie 2): Méthodes et fonctions Ceci fait partie d'une introduction en cours sur la série de programmes de programmation Web jQuery. La première partie couvrait les bases de jQuery sur la manière de l'inclure dans votre projet et les sélecteurs. Dans la partie 2, nous poursuivrons avec… Read More
• 3: En attente de chargement de page et de fonctions anonymes Introduction à jQuery (Partie 3): Attente de la page à charger et fonctions anonymes Introduction à jQuery (Partie 3): Attente de la page à charger et aux fonctions anonymes jQuery est une compétence essentielle pour le développeur Web moderne, et dans cette courte mini-série, j’espère vous donner les connaissances nécessaires pour commencer à l’utiliser dans vos propres projets Web. Dans… Lire la suite
• 4: Événements Tutoriel jQuery (4ème partie) - Auditeurs d’événements Tutoriel jQuery (4ème partie) - Auditeurs d’événements Aujourd'hui, nous allons passer à la vitesse supérieure et montrer vraiment où jQuery brille - les événements. Si vous avez suivi les tutoriels précédents, vous devriez maintenant avoir une assez bonne compréhension du code de base… En savoir plus
• Débogage avec les outils de développement Chrome: résolvez les problèmes de site Web avec les outils de développement Chrome ou Firebug. Résolvez les problèmes de site Web avec les outils de développement Chrome ou Firebug. Si vous avez suivi mes didacticiels jQuery jusqu'à présent, vous avez peut-être déjà rencontré des problèmes de code et vous ne savez pas comment pour les réparer. Face à un morceau de code non fonctionnel, il est très… Read More
• 5: Tutoriel AJAX jQuery (Partie 5): AJAX, eux tous! jQuery Tutorial (Part 5): AJAX, eux tous! Alors que nous approchons de la fin de notre série de mini-didacticiels jQuery, il est temps que nous examinions plus en détail l'une des fonctionnalités les plus utilisées de jQuery. AJAX permet à un site Web de communiquer avec… Read More

Qu'est-ce que l'interface utilisateur de jQuery et pourquoi devrais-je l'utiliser??

jQuery UI vous fournit tous les composants nécessaires à une application Web moderne avec une interface graphique. A défaut d'une meilleure description, c'est une collection de widgets.

Pour une idée rapide de ce que vous pouvez en faire, parcourez simplement MakeUseOf. Dans le nôtre, le contenu est en fait juste séparé divs avec une liste non ordonnée pour agir comme un index. Exécutez la fonction des onglets jQuery sur eux et ils se transforment comme par magie en onglets. Impressionnant! Vous pouvez même charger le contenu des onglets via AJAX si vous le souhaitez..

La page Récompenses utilise également un “popup modal” boîte de dialogue pour confirmer l’action de l’utilisateur et renvoyer les messages. Pour attirer l'attention des utilisateurs, vous pouvez laisser la boîte de dialogue atténuer le reste du contenu de la page jusqu'à la fin de l'interaction..

Sur notre site Answers, nous utilisons le simple infobulle fonction pour fournir des astuces sur les boutons.

jQuery UI excelle vraiment en termes de formulaires, donnant accès à une multitude de curseurs et de sélecteurs. Je suis un grand fan de la sélecteur de date moi-même widget, que vous pouvez charger au-dessus d'une zone de saisie de texte normale où l'utilisateur est censé taper une date.

Ça a l'air compliqué, n'est-ce pas? Pouvez-vous imaginer coder quelque chose comme ça en JavaScript pur? Voici comment vous le faites avec jQuery UI:

$ ("# dateField"). datepicker ();

Je ne passerai plus de temps à expliquer à quel point c'est génial parce que les démos officiels de jQuery UI donnent un bon aperçu de toutes les fonctionnalités disponibles ainsi que de simples exemples de code. Allez le lire.

Ajout de l'interface utilisateur de jQuery

Le moyen le plus simple de se familiariser avec jQuery UI est d’ajouter les lignes suivantes à votre en-tête. Assurez-vous toutefois qu’elles sont ajoutées APRÈS la référence principale de jQuery, car jQuery UI nécessite le préchargement de jQuery. Vous avez besoin à la fois d’une référence au script du plugin et d’une feuille de style qui contient la description visuelle de ces éléments de l'interface utilisateur.

>