Share
jQuery UI 1.8 est actuellement au stade de la version candidate à la publication et, sous réserve de la découverte d’un bogue ou d’une faille majeure, deviendra prochainement la version stable actuelle de la bibliothèque d’interface utilisateur officielle de jQuery. Alors, qu'est-ce qui a changé depuis la dernière version stable actuelle, la 1.7.2? Une des différences majeures est bien sûr que la bibliothèque fonctionne maintenant avec la dernière version de jQuery, la version 1.4.1, mais de nombreux autres changements ont été apportés, y compris l’ajout de nouveaux composants exceptionnels, que nous examinerons plus en détail. cours de cet article.
L'auteur de cet article, Dan Wellman, a récemment publié jQuery UI 1.7, de Packt Publishing. C'est une lecture fantastique, et j'ai le plaisir d'annoncer que nous avons quelques exemplaires à distribuer au hasard. Laissez simplement un commentaire sur l'article et vous serez automatiquement inscrit au dessin. Revenez lundi pour savoir si vous êtes un gagnant!
Cette version de la bibliothèque apporte plusieurs corrections de bogues pour certains composants clés, notamment les widgets Datepicker et Dialog et les aides d’interaction Droppable, Resizable et Selectable. Aucun des bogues n’a été à l’état de brouillard, mais néanmoins, le nettoyage de ces bogues est un élément essentiel de la progression continue de la bibliothèque. Un point important à noter est que le avant de fermer L'événement du widget Dialogue est obsolète et remplacé par avantFermer afin qu'il suive la même convention d'appellation que les événements des autres composants.
Outre les bugs dans le code, plusieurs problèmes de style et d'accessibilité ont également été résolus; notamment le titre des widgets de dialogue ne peut plus disparaître derrière l'icône de fermeture, et la navigabilité du nouveau widget de bouton a été améliorée. Pour une liste complète de tous les correctifs de bogues inclus avec la version 1.8, voir le journal des modifications à l'adresse http://jqueryui.com/docs/Changelog/1.8rc1.
jQuery UI a maintenant un système de positionnement unique qui peut être utilisé chaque fois qu'un widget doit être positionné par rapport à un autre élément, par exemple avec un menu déroulant ou une info-bulle flottante. L'utilitaire Position nous permet de spécifier facilement, à l'aide d'une série de chaînes simples, quelle partie de l'élément positionné doit être fixée à quelle partie de l'élément cible spécifié. Ainsi, par exemple, le "en haut à gauche" point d'un élément peut être fixé à la "en bas à droite" d'un autre élément spécifié.
L'utilitaire comporte également un système de détection de collision robuste qui empêche les visiteurs de la page d'être exposés à des barres d'outils disgracieuses si l'élément en cours de positionnement s'approche trop du bord de la fenêtre d'affichage ou ne peut occuper autrement sa place..
L'API de cet utilitaire est compact, avec seulement 7 options configurables à ce stade. Cela nous donne cependant tout le contrôle dont nous avons besoin et nous permet de spécifier jusqu'à 81 combinaisons possibles de positionnement; Les options que nous pouvons configurer sont les suivantes:
Un de mes widgets préférés est de retour dans l'interface utilisateur! Autocomplete était un widget bêta dans une version 1.6 de la bibliothèque et est maintenant de retour après un refactor complet. Il est associé aux entrées de texte de la page et fournit une liste de choix possibles lorsqu'un visiteur commence à taper dans le champ de texte..
Le widget peut extraire ses données (les éléments correspondants dans le menu de suggestion) de diverses sources, notamment un tableau JavaScript standard, JSON via une requête AJAX ou une fonction de rappel flexible pouvant implémenter toute source de données et renvoyer une réponse personnalisée à afficher. le menu de suggestion.
La saisie semi-automatique est un widget hautement configurable et dispose d'une API complète d'options, de méthodes et d'événements à utiliser. Il est complètement thématique via SteamRoller et entièrement navigable au clavier. Dans l'ensemble, ce composant apporte beaucoup de fonctionnalités à vos pages. À un moment donné, la mise en cache peut également être un comportement configurable.
Jetons un coup d'oeil à son API; il contient les trois options de configuration suivantes:
La saisie semi-automatique expose les deux méthodes suivantes:
Nous pouvons également associer des fonctions de rappel aux événements personnalisés suivants:
En prime, le fichier source du widget de saisie semi-automatique contient également le widget Menu bêta, qui est toujours en cours de développement et doit être publié dans une version ultérieure de la bibliothèque. Jusqu'ici, cela semble être un ajout robuste et attrayant à la bibliothèque et nous permet de transformer une liste non ordonnée en un menu déroulant ou un menu déroulant attrayant. De nombreuses fonctionnalités sont prises en charge, notamment les sous-menus, les icônes, les séparateurs et même un menu détaillé avec le fil d'Ariane.
Le widget bouton nous permet d'implémenter des boutons attrayants et fonctionnels pouvant être configurés pour se comporter comme un type de bouton particulier; Par exemple, nous pouvons créer des boutons-poussoirs standard, des boutons de style radio où un seul bouton d'un ensemble peut être sélectionné, ou des boutons de style de contrôle où un nombre quelconque d'un ensemble peut être sélectionné. Plusieurs types de boutons incorporant un simple menu déroulant peuvent également être créés..
C'est un widget très flexible et peut être construit en utilisant une variété d'éléments sous-jacents, y compris , et . Les boutons sont entièrement accessibles et conformes à la norme ARIA. Ils permettent d’ajouter ou de supprimer les rôles et les états appropriés, le cas échéant. L'API est relativement simple à ce stade, mais couvre tous les éléments essentiels avec trois options configurables et une seule méthode à appeler; les options de configuration sont les suivantes:
L’événement auquel on peut se connecter pour exécuter une fonction de rappel et réagir à une interaction est le Cliquez sur un événement; le natif Cliquez sur L'événement du navigateur est utilisé sauf avec les boutons style radio ou case à cocher, auquel cas l'événement est déclenché par le widget, et non par l'élément sous-jacent..
Le dernier nouvel utilitaire que l'on trouve dans jQuery UI 1.8 est l'utilitaire Mouse, utilisé par d'autres composants de la bibliothèque afin de mieux répartir les implémentations associées du même comportement avec différents widgets. Cela est très utile pour les développeurs car cela signifie que si l'interaction de la souris est le comportement requis d'un widget d'interface utilisateur personnalisé, la logique de cet utilitaire peut être utilisée sans avoir à le réécrire manuellement. Tout comme le composant Menu, cet utilitaire doit cependant être considéré comme une version bêta et faire l’objet de nombreuses révisions dans les prochaines versions.
L'API est très compacte. il n'y a que trois options configurables; il y a une série de méthodes privées qui sont utilisées en interne par le plugin, mais rien ne devrait être appelé manuellement. Les options configurables sont les suivantes:
jQuery UI 1.8 s'annonce comme une belle version de la bibliothèque; avec une combinaison de corrections de bugs et de nouveaux composants, cela ressemble à une étape importante dans la feuille de route de la bibliothèque. Nous avons d’abord examiné le nouveau système de positionnement de la bibliothèque, qui nous permet d’accéder facilement à un très grand nombre de possibilités différentes de positionnement d’un élément par rapport à un autre. Nous avons ensuite examiné les deux nouveaux composants Autocomplete et Button et avons vu les différentes options de configuration, méthodes et événements exposés par chacune de leurs API..
Accentsconagua