Selon le « Manuel de référence chinois de jQuery UI », jQuery UI est un ensemble d'interactions d'interface utilisateur, d'effets spéciaux, de widgets et de thèmes construits sur la bibliothèque JavaScript jQuery. Que vous créiez une application Web hautement interactive ou que vous ajoutiez simplement un sélecteur de date à un contrôle de formulaire, jQuery UI est un choix parfait. L'interface utilisateur de jQuery contient de nombreux widgets qui conservent l'état. Elle est donc légèrement différente du modèle d'utilisation typique du plug-in jQuery.
jQuery UI est un ensemble de bibliothèques JavaScript qui fournissent des commandes GUI de thème abstraites et personnalisables et des effets d'animation. Basé sur la bibliothèque JavaScript jQuery, il peut être utilisé pour créer des applications Internet interactives. Il a été officiellement rendu public en septembre 2007 dans un article de John Lessig sur le blog jquery.com. La dernière version nécessite jQuery 2.1.1 ou une version plus récente.
Conseils : Avant de commencer à apprendre l'interface utilisateur jQuery, vous devez avoir des connaissances de base en HTML, CSS, JavaScript.
Avantages et inconvénients de jQuery UI :
Avantages :
1 Simple et facile à utiliser, hérite des fonctionnalités faciles à utiliser de jQuery, fournit une interface hautement abstraite et améliore la convivialité du site Web dans le court terme.
2. Il est léger et rapide, et les composants sont relativement indépendants et peuvent être chargés à la demande pour éviter de gaspiller de la bande passante et de ralentir la vitesse d'ouverture des pages Web.
3. Normes avancées, prend en charge WAI-ARIA, fournit une amélioration progressive grâce au code XHTML standard et garantit l'accessibilité dans les environnements bas de gamme.
4. Forte prise en charge, Google fournit une prise en charge du réseau de distribution de contenu CDN pour la publication du code.
Inconvénients :
1. Le code n'est pas assez robuste : il manque de cas de test complets, certains composants présentent de nombreux bugs et ne peuvent pas répondre aux exigences de développement de produits au niveau de l'entreprise.
2. Planification de l'architecture insuffisante : manque de coordination des API entre les composants et manque d'aide pour une utilisation coopérative.
3. Moins de contrôles : par rapport aux produits matures tels que Dojo, YUI et Ext JS, il y a moins de contrôles disponibles et ne peuvent pas répondre aux exigences fonctionnelles d'interface complexes.
Conseils : Notre didacticiel jQuery UI vous aidera à apprendre à maîtriser et à utiliser jQuery UI étape par étape. Si vous avez des questions, veuillez vous rendre sur le site Web chinois PHP jQuery UI Community pour poser vos questions, et des internautes enthousiastes vous aideront à répondre.
Fonctions de l'interface utilisateur jQuery
Prenons la version 1.9.0 comme exemple.
Interaction
Draggable – permet de faire glisser des éléments avec la souris.
Droppable – permet au contrôle d'accepter d'autres éléments glissés.
Resizing – Rendre l'élément redimensionnable.
Sélectionnable – Fournit des capacités de sélection avancées pour un grand nombre d'éléments.
Sortable – Rend les listes plus faciles à trier.
Contrôles
Tous les contrôles de jQuery UI peuvent être personnalisés avec des styles de thème.
Menu Accordéon – Commandes évolutives de type accordéon.
Autocomplete – complétez automatiquement les champs de texte en fonction de la saisie de l'utilisateur.
Bouton – Améliorez l'apparence des boutons et transformez les commandes de radio et de vérification en styles de boutons.
Datepicker – un outil avancé de sélection de dates.
Dialog – affiche une boîte de dialogue en haut de la page.
Menu - Affiche un menu structuré à plusieurs niveaux.
Progressbar – barres d'indicateurs de progression dynamiques et statiques.
Curseur – Curseur entièrement personnalisable avec diverses fonctions.
Spinner - Champ de saisie du spinner numérique avec contrôle haut et bas.
Onglets – Contrôle de commutation d'onglets, qui peut intégrer ou charger dynamiquement du contenu.
Tooltip - boîte de dialogue contextuelle.
Effect
Color Animation – Effets d'animation qui produisent des transitions de couleurs.
Changer de classe, ajouter une classe, supprimer une classe, changer de classe – avoir des effets d'animation lorsque le style des éléments de la page change.
Effets – divers effets (affichage, liste déroulante, explosion, fondu entrant, etc.).
Toggle – Commutateur d'effet à bascule.
Masquer, Afficher - Utilisez les effets ci-dessus.
Outils
Position – Définissez la position (alignement) de l'élément cible par rapport à un autre élément.
Ce que couvre ce manuel du didacticiel jQuery UI
Ce manuel du didacticiel jQuery UI couvre toutes les connaissances de base à avancées de jQuery UI, y compris l'entrée jQuery UI, le maître jQuery UI, la bibliothèque de composants jQuery UI et d'autres connaissances.
Conseils : Chaque chapitre de ce tutoriel contient de nombreux exemples d'interface utilisateur jQuery. Vous pouvez directement cliquer sur le bouton "Exécuter l'exemple" pour afficher les résultats en ligne ou utiliser directement l'éditeur en ligne pour tester. Ces exemples vous aideront à mieux comprendre et utiliser jQuery UI.
Autres ressources de référence d'apprentissage liées à l'interface utilisateur jQuery
En plus de l'expansion des connaissances sur le côté droit de cette page, les ressources suivantes sont également sélectionnées pour tout le monde
Dernier chapitre
- 部件库(Widget Factory) 2016-10-19
- 定位(Position) 2016-10-19
- 颜色动画(Color Animation) 2016-10-19
- 转换 Class(Switch Class) 2016-10-19
- 切换 Class(Toggle Class) 2016-10-19
- 移除 Class(Remove Class) 2016-10-19
- 添加 Class(Add Class) 2016-10-19
- 切换(Toggle) 2016-10-19
Cours connexes
- Introduction rapide au développement web front-end 2021-12-10
- Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original] 2022-09-30
- Tutoriel vidéo de démarrage de Gulp 2022-04-18
- Tutoriel vidéo CSS3 des frères d'armes Gao Luofeng 2022-04-20
- Tutoriel vidéo d'exemple de base d'application Web de développement AngularJS 2022-04-18
- Contact complet Ajax 2022-04-13
- Tutoriel vidéo de base du framework MUI 2022-04-13
- Cours d'essai de cours de formation en ligne 2019-01-10