La structure d'effets de l'interface utilisateur jQuery est modulaire, tout comme le framework de widgets, vous permettant de choisir les parties du package que vous souhaitez utiliser et de réduire les exigences du code. Vous pouvez créer un téléchargement personnalisé pour vous-même, qui prend en compte les dépendances entre les modules.
Avant de voir comment créer un nouvel effet, vous devez connaître les autres fonctionnalités déjà offertes par la structure d'effets de l'interface utilisateur jQuery, de manière à pouvoir l'utiliser lors du développement de vos propres effets.
Sous-jacents aux modules d'effets individuels de l'interface utilisateur jQuery se trouve un noyau de fonctionnalités couramment utilisées. Ces capacités sont implémentées ici afin de ne pas avoir à les réinventer et à les appliquer immédiatement à vos propres effets. Outre l'animation couleur, vous trouverez une animation à partir des attributs d'une classe à une autre, ainsi que plusieurs fonctions de bas niveau pouvant être utiles pour développer de nouveaux effets.
Le module Effects Core ajoute une prise en charge d'animation personnalisée pour les attributs de style contenant des valeurs de couleur: couleurs de premier plan et d'arrière-plan et couleurs de bordure et de contour. jQuery lui-même n'autorise que l'animation d'attributs qui sont des valeurs numériques simples, avec un désignateur d'unités optionnel tel que px, em ou%. Il ne sait pas comment interpréter des valeurs plus complexes, comme les couleurs, ou comment incrémenter ces valeurs correctement pour obtenir la transition souhaitée, par exemple du bleu au rouge via une couleur mauve intermédiaire.
Les valeurs de couleur sont composées de trois composants: les contributions rouge, verte et bleue, chacune ayant une valeur comprise entre 0 et 255. Elles peuvent être spécifiées en HTML et CSS de différentes manières, comme indiqué ci-dessous:
Les composants rouge, vert et bleu doivent être séparés et animés individuellement de leurs valeurs initiales à leurs valeurs finales avant d'être combinés dans la nouvelle couleur composite pour les étapes intermédiaires. L'interface utilisateur jQuery ajoute des étapes d'animation pour chaque attribut affecté afin de décoder correctement les couleurs actuelles et souhaitées et de modifier la valeur au cours de l'exécution de l'animation. Outre les formats de couleurs décrits dans la liste précédente, l'appel d'animation peut également accepter un tableau de trois valeurs numériques (chacune comprise entre 0 et 255) pour spécifier la couleur. Une fois ces fonctions définies, vous pouvez animer les couleurs comme vous le feriez pour d'autres attributs numériques:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});L'interface utilisateur jQuery contient une liste étendue de couleurs nommées qu'elle comprend, du rouge et du vert de base aux darkorchid et darksalmon plus ésotériques. Il y a même une couleur transparente.
JQuery standard vous permet d'ajouter, de supprimer ou de basculer des classes sur des éléments sélectionnés. jQuery UI va un mieux en vous permettant d’animer la transition entre les états avant et après. Cela se fait en extrayant toutes les valeurs d'attribut pouvant être animées (valeurs numériques et couleurs) des configurations de début et de fin, puis en appelant un appel animé standard avec toutes ces propriétés à modifier. Cette nouvelle animation est déclenchée en spécifiant une durée lors de l'appel des fonctions addClass, removeClass ou toggleClass:
$('#myDiv').addClass('highlight', 1000);jQuery UI ajoute également une nouvelle fonction, switchClass, qui supprime une classe et ajoute une classe, avec la transition facultative entre les deux états (lors de la fourniture d'une durée):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);Pour mieux prendre en charge les différents effets de l'interface utilisateur jQuery, le module Effects Core fournit plusieurs fonctions utiles pour ces effets, et peut-être pour le vôtre. Pour illustrer comment plusieurs de ces fonctions sont utilisées, la liste suivante montre les parties pertinentes de l'effet de diapositive.
$.effects.effect.slide = function( o, done ) {// Create elementvar el = $( this ),props = [ "position", "top", "bottom", "left", "right", "width", "height" ],mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation// Adjust$.effects.save( el, props ); // Save current settingsel.show();distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation...// Animationanimation[ ref ] = ...;// Animateel.animate( animation, {queue: false,duration: o.duration,easing: o.easing,complete: function() {if ( mode === "hide" ) {el.hide();}$.effects.restore( el, props ); // Restore original settings$.effects.removeWrapper( el ); // Remove animation wrapperdone();}});};Vous pouvez utiliser la fonction setMode pour convertir un mode de basculement en valeur d'affichage ou de masquage appropriée en fonction de la visibilité actuelle de l'élément. Si le mode fourni est show ou hide, il conserve cette valeur et, dans ce cas, affiche les valeurs par défaut, sinon affichées.
Avant de commencer l'animation de l'effet, vous pouvez utiliser la fonction de sauvegarde pour mémoriser les valeurs d'origine de plusieurs attributs (issus des noms des accessoires) sur l'élément, afin de pouvoir les restaurer à la fin. Les valeurs sont stockées sur l'élément à l'aide de la fonction de données jQuery.
Pour faciliter le mouvement d'un élément pour un effet, vous pouvez envelopper un conteneur autour de cet élément avec la fonction createWrapper à utiliser comme point de référence pour le mouvement. Les informations de position sont copiées à partir de l'élément spécifié sur le wrapper afin qu'elles apparaissent directement sur l'élément d'origine. L'élément est ensuite positionné dans le nouveau conteneur en haut à gauche de manière à ce que l'utilisateur puisse détecter l'effet global. La fonction renvoie une référence au wrapper.
Toute modification des paramètres gauche / droit / haut / bas de l'élément d'origine sera désormais relative à sa position d'origine, sans affecter les éléments environnants. Après avoir enregistré certaines valeurs d'attribut plus tôt, vous utiliseriez la fonction de restauration à la fin de l'animation pour les restaurer dans leurs paramètres d'origine. Dans le même temps, vous devez supprimer tout wrapper que vous avez créé précédemment avec la fonction remove-Wrapper. Cette fonction renvoie une référence à l'encapsuleur s'il a été supprimé ou à l'élément lui-même s'il n'y avait pas d'encapsuleur.
Il existe d'autres fonctions fournies par le module jQuery UI Effects Core qui peuvent être utiles:
getBaseline (origine, original) Cette fonction normalise une spécification d'origine (un tableau de positions verticales et horizontales à deux éléments) en valeurs fractionnaires (0,0 à 1,0) en fonction d'une taille d'origine (un objet avec des attributs height et width). Il convertit les positions nommées (haut, gauche, centre, etc.) en valeurs 0.0, 0.5 ou 1.0 et convertit les valeurs numériques en proportion de la dimension concernée. L'objet renvoyé a les attributs x et y pour contenir les valeurs fractionnaires dans les directions correspondantes. Par exemple,
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (élément, liste, facteur, valeur) Pour appliquer un facteur de mise à l'échelle à plusieurs valeurs d'attribut, utilisez cette fonction. Pour chaque nom d'attribut dans la liste, récupérez sa valeur actuelle pour l'élément et mettez-la à jour en la multipliant par facteur. Définissez le résultat dans l'objet value sous le nom de l'attribut et renvoyez cet objet à partir de la fonction. Par exemple, pour réduire certaines valeurs de moitié, vous pouvez le faire:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (clé) Pour séparer un attribut CSS (clé) nommé dans sa quantité et les unités (em, pt, px ou%), renvoyées sous la forme d'un tableau de deux valeurs, utilisez cette fonction. Si les unités ne font pas partie de ces types connus, un tableau vide est renvoyé. Par exemple,
var value = el.cssUnit('width'); // e.g. value = [200, 'px']Les fonctions présentées dans cette section sont utilisées par la plupart des effets fournis par l'interface utilisateur jQuery. Ces effets sont examinés dans la section suivante.
De nombreux effets sont fournis par l'interface utilisateur jQuery. La plupart d’entre elles sont conçues pour améliorer la façon dont un élément apparaît ou disparaît (tel que le store et le drop), tandis que d’autres servent à attirer votre attention sur un élément (comme mettre en évidence et secouer):
Ces effets peuvent être utilisés conjointement avec les fonctions d'affichage, de masquage et de basculement améliorées de l'interface utilisateur jQuery en fournissant le nom de l'effet souhaité comme premier paramètre. Vous pouvez également fournir des options supplémentaires qui modifient le comportement de l'effet, la durée de l'animation et une fonction de rappel déclenchée à la fin.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);Les modules d'interface utilisateur jQuery comprennent des fonctions utilitaires de base, des comportements de bas niveau (tels que le glisser-déposer), des composants ou des widgets de haut niveau (tels que les onglets et le Datepicker) et de nombreux effets visuels. Vous pouvez utiliser ces effets pour améliorer la présentation des éléments de votre page Web ou pour attirer l'attention d'un utilisateur sur un élément particulier. Pour vous aider à créer vos propres effets, il existe un noyau de fonctions couramment utilisées.
Avez-vous utilisé le cadre d'effets de l'interface utilisateur jQuery? Comment se compare-t-il aux tweens CSS natifs? Faites-nous savoir vos pensées dans les commentaires.