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 grace 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

• Dugu Jiujian (6)_jQuery tutoriel vidéo