Share
C'est dur. Vous lisez tutoriel après tutoriel, mais ils supposent tous que vous en savez plus que vous ne le savez réellement. Au moment où vous avez terminé, vous vous sentez plus confus qu'auparavant. Pourquoi a-t-il créé un objet vide? Qu'est-ce que cela signifie lorsque vous passez "options" en tant que paramètre? Que font réellement les "paramètres par défaut"?
Jamais peur; Je vais vous montrer exactement comment créer votre propre plug-in "tooltip", à la demande de l'un de nos fidèles lecteurs..
Il peut être utile de penser aux plugins de la même manière que vous le feriez. Vous est-il déjà arrivé de répéter les mêmes procédures?
pour site après site? Vous avez peut-être créé votre propre système de tabulation que vous aimez utiliser. Plutôt que d’écrire le même temps de code et
Encore une fois, ne serait-il pas plus facile de transformer votre long bloc de code en une seule ligne? C'est essentiellement ce qu'un plugin fait pour nous.
Il permet la réutilisation, ce qui est primordial - si vous voulez garder votre salaire horaire élevé!
Créez un nouveau projet dans votre éditeur de code préféré et collez-le dans le code HTML suivant.
Vous ne pouvez toujours pas créer un plugin jQuery? Lorem Ipsum a l'avantage de présenter une distribution de lettres plus ou moins normale, par opposition à l'utilisation de 'Contenu ici, contenu ici', ce qui donne un aspect lisible en anglais. De nombreux packages de publication assistée par ordinateur et éditeurs de pages Web utilisent maintenant Lorem Ipsum comme texte de modèle par défaut. Une recherche sur 'lorem ipsum' permet de découvrir de nombreux sites Web qui n'en sont encore qu'à leurs balbutiements. Différentes versions ont évolué au fil des ans, parfois par accident, parfois exprès (humour injecté, etc.)..
Ce code est assez simple. de sorte qu'il ne nécessite pas trop d'un aperçu.
Je trouve généralement qu'il est plus facile de construire mon plugin si je détermine d'abord comment je vais l'appeler. Considérons le code suivant.
J'ai décidé que je voulais simplement que le nom de mon plugin s'appelle "tooltip". J'ai aussi déterminé que je voulais être capable de passer quelques
paramètres afin de personnaliser légèrement mon info-bulle. Ce sera purement facultatif pour l'utilisateur si. Si vous le préférez, il peut simplement taper:
Dans ce cas, le défaut les options seront utilisées.
Alors maintenant que nous savons comment le plugin sera appelé, allons-y et construisons-le! Créez un nouveau fichier dans votre projet et nommez-le "jQuery.tooltip.js". Lors de la création d'un plug-in, certaines conventions de dénomination sont potentiellement utilisées par d'autres. Nous commençons par écrire 'jQuery', suivi du nom de notre plugin. Cependant, je suis sûr que vous réalisez que des milliers de personnes ont créé leur propre plug-in d'info-bulle. Vous pouvez déterminer qu'il est nécessaire de préfacer "info-bulle" avec une chaîne unique; peut-être vos initiales. En tout état de cause, peu importe. Vous êtes libre de nommer votre plugin comme bon vous semble.
(fonction ($) … code) (jQuery);
Nous devons d’abord veiller à ce que le symbole "$" ne nous cause aucun problème. Et si nous utilisions également d'autres bibliothèques Javascript dans notre application? Avez-vous déjà pensé à ça? Dans de tels cas, nous aurions besoin de remplacer chaque "$" dans notre document par "jQuery". Le seul problème est qu'il s'agit d'une solution plutôt bâclée. Au lieu de cela, créons une fonction anonyme invocante et passons "$" comme alias. De cette façon, nous sommes libres d'utiliser "$" autant que nous le souhaitons sans avoir à nous soucier des conflits.
$ .fn.tooltip = function (options)
Dans notre wrap, nous devons déclarer notre nouveau plugin et le rendre égal à la fonction suivante. Nous pouvons accomplir cette tâche en tapant jQuery.fn (abréviation de prototype).le nom de notre plugin.
Rappelez-vous quand j'ai spécifié que l'utilisateur devrait être capable de faire de petites modifications à l'info-bulle? Ces modifications seront stockées dans le paramètre "options".
var defaults = background: '# e3e3e3', couleur: 'black', arrondi: false,
Il est probable que l'utilisateur ne spécifie aucune option. Nous allons donc définir nos propres options "par défaut". Comme il s’agit d’un tutoriel pour les débutants, nous ne ferons pas grand chose ici. Surtout, cela démontre ce qui est possible. Nous autorisons l'utilisateur à sélectionner une couleur d'arrière-plan, une couleur et si l'info-bulle est arrondie ou non.
Plus tard dans notre code, lorsque nous souhaitons accéder à ces valeurs, nous pouvons simplement taper: defaults.rounded.
Alors, comment pouvons-nous déterminer si l'utilisateur ajoute ses propres options? La réponse est que nous devons fusionner les 'valeurs par défaut' avec les 'options'.
settings = $ .extend (, valeurs par défaut, options);
Nous avons créé une nouvelle variable appelée "paramètres" et avons demandé à jQuery de fusionner les "valeurs par défaut" et les "options", puis de placer les résultats dans un nouvel objet. Lors de la fusion, les "options" sélectionnées par l'utilisateur auront priorité sur les valeurs par défaut..
Vous vous demandez peut-être pourquoi je n’ai pas ajouté "var" avant les réglages. Techniquement, ce n'est pas obligatoire, bien que cela soit considéré comme une pratique exemplaire. Si vous faites défiler un peu, vous verrez qu'après notre objet par défaut, j'ai ajouté une virgule. Ce faisant, nous pouvons continuer à créer plus de variables sans avoir besoin de «var» à chaque fois. Par exemple…
var joe = ; var est = ; var good = ;
peut devenir…
var joe = , est = , bien = ;
this.each (function () var $ this = $ (this); var title = this.title;
Il est important de garder à l'esprit que l'ensemble encapsulé que l'utilisateur passe à ce plugin peut contenir plusieurs éléments, et pas un seul. Nous devons nous assurer que nous utilisons une méthode pour chaque instruction - ou la méthode "chaque" de jQuery - pour parcourir le code..
Nous commençons notre nouvelle fonction en mettant en cache $ (this). Non seulement cela nous épargnera quelques personnages, mais cela accélérera légèrement les choses. Ce n'est pas obligatoire, mais est considéré comme une bonne pratique. Beaucoup de gens demandent: "Pourquoi ajoutez-vous le signe dollar devant votre variable?". Nous faisons cela pour nous rappeler que nous travaillons avec l'objet jQuery. Ce faisant, je me souviens que je peux appeler des choses comme: $ this.click () ;. Ensuite, je stocke la valeur de l'attribut title dans une variable appelée "title". Vous verrez pourquoi nous devons le faire dans un instant.
Accentsconagua
if ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ this.hover (fonction (e) Il est facile d'oublier à quoi $ this fait référence. Quand vous oubliez, retournez à la façon dont vous appelez la méthode "tooltip".
$ ('a.tooltip'). tooltip (); Nous pouvons voir ici que $ this fait référence à chaque balise d'ancrage qui a une classe de "tooltip".
Retour au code; si l'élément dans l'ensemble encapsulé est, en fait, une balise d'ancrage ET son attribut 'title' n'est pas vide, exécutez du code. Ceci est plutôt explicite. Je ne veux pas exécuter de code si l'utilisateur passe accidentellement une image. De plus, je ne veux pas créer ma boîte à outils s'il n'y a rien à afficher!
Dans mon "if", je règle l'attribut "title" de la balise d'ancrage égal à néant. Cela empêchera le chargement de l'infobulle par défaut du navigateur. Ensuite, j'ajoute un écouteur d'événement lorsque le curseur $ this ou la balise d'ancrage est survolé. Lorsque c'est le cas, nous créons une nouvelle fonction et passons l'objet événement en tant que paramètre. Ne t'en fais pas pour l'instant, je t'expliquerai plus tard..
var title = $ this.attr ('title'); $ ('') .appendTo (' body ') .hide () .text (title) .css (backgroundColor: settings.background, couleur: settings.color, en haut: e.pageY + 10, à gauche: e.pageX + 20 ) .fadeIn (350); J'ai créé une variable appelée "titre" et l'a rendue égale à la valeur contenue dans l'attribut "titre" de la balise d'ancrage. Ce n'est pas vraiment nécessaire - mais ça m'aide.
Lorsque nous ajoutons des balises HTML à notre instruction jQuery, nous pouvons créer un nouvel élément plutôt que d’en récupérer un. Nous créons une nouvelle balise div avec un identifiant "info-bulle". Ensuite, nous utiliserons les merveilleuses capacités de chanter de jQuery pour effectuer un grand nombre de procédures en toute simplicité..
if (defaults.rounded) $ ('# tooltip'). addClass ('arrondi'); Par défaut, notre option "arrondi" est définie sur "faux". Cependant, si 'defaults.rounded' renvoie true (ce qui signifie que l'utilisateur a ajouté ce paramètre), nous devons ajouter une classe de 'arrondi' à notre fichier CSS. Nous allons créer ce fichier bientôt.
, function () // souris sortie $ ('# info-bulle'). hide (); ); "Survol" accepte deux fonctions: passer la souris sur la souris et la faire disparaître. Nous avons ajouté le code approprié au moment où l'utilisateur passe la souris sur notre balise d'ancrage sélectionnée. Mais nous devons aussi écrire du code qui supprime l'info-bulle une fois que la souris a quitté la balise d'ancrage..
Il serait bien de forcer la boîte de dialogue info-bulle à se déplacer lorsque notre souris se déplace. Implémentons cela rapidement.
$ this.mousemove (function (e) $ ('# tooltip'). css (top: e.pageY + 10, gauche: e.pageX + 20); Lorsque la souris survole la balise d'ancrage, créez une fonction et, encore une fois, transmettez l'objet événement en tant que paramètre. Recherchez l'élément 'tooltip' et ajustez son code CSS. Vous devez comprendre que c'est le code exact tel que nous l'avons écrit précédemment. Nous réinitialisons simplement ces valeurs sur les nouvelles. Nifty, hein?
Nous devons permettre à l'utilisateur de continuer à chaîner après avoir été appelé "info-bulle". Par exemple:
$ ('a.tooltip'). tooltip (). css (…) .remove (); Afin de permettre cet enchaînement, nous devons renvoyer 'ceci'. Juste avant votre accolade fermante, ajoutez "return this;".
Vous venez de créer avec succès un plugin pleinement fonctionnel. Ce n'est pas trop avancé, mais cela nous a permis de revoir certaines caractéristiques clés. Voici le code final.
(fonction ($) $ .fn.tooltip = fonction (options) var par défaut = arrière-plan: '# e3e3e3', couleur: 'noir', arrondi: faux, settings = $ .extend (, par défaut, options); this.each (function () var $ this = $ (this); var title = this.title; if ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ this.hover (function (e) // souris sur $ ('') .appendTo (' body ') .text (titre) .hide () .css (backgroundColor: settings.background, couleur: settings.color, en haut: e.pageY + 10, à gauche: e.pageX + 20 ) .fadeIn (350); if (settings.rounded) $ ('# info-bulle'). addClass ('arrondi'); , function () // souris sortie $ ('# info-bulle'). remove (); ); $ this.mousemove (function (e) $ ('# tooltip'). css (en haut: e.pageY + 10, à gauche: e.pageX + 20); ); // retourne l'objet jQuery pour permettre la chaînabilité. retournez ceci; ) (jQuery); 
La dernière étape consiste à ajouter juste un peu de CSS pour embellir notre info-bulle. Créez un nouveau fichier CSS appelé 'default.css', et collez le texte suivant dans.
#tooltip background: # e3e3e3 url (… /images/search.png) no-repeat 5px 50%; bordure: solide 1px #BFBFBF; float: gauche; taille de police: 12px; largeur maximale: 160px; rembourrage: 1em 1em 1em 3em; position: absolue; .rounded -moz-border-radius: 3px; -webkit-border-radius: 3px;
Rien de trop compliqué ici. Je fais référence à une image d'arrière-plan contenant la loupe standard "recherche". Vous pouvez télécharger le code source pour l'utiliser. De plus, j'ai ajouté un peu de remplissage, une largeur maximale et une taille de police. La plupart de cela revient à la préférence. Vous êtes libre de l'éditer comme bon vous semble.
La seule propriété vitale est "position: absolute;". Plus tôt, nous avons défini les valeurs "top" et "left" avec jQuery. Pour que ce positionnement prenne effet, il faut définir la position en absolu! C'est important. Si vous ne le faites pas, cela ne fonctionnera pas.
À tous ceux qui m'ont envoyé ce message par courrier électronique, j'espère que cela l'aidera d'une manière ou d'une autre. Si je ne me suis pas suffisamment expliqué, veillez à visionner le screencast associé et / ou à demander un commentaire. Je vais essayer de vous aider au mieux de mes capacités. Jusqu'à la prochaine fois…
Si vous maîtrisez parfaitement les techniques présentées dans ce didacticiel, vous êtes prêt à passer à autre chose! Envisagez de vous inscrire à un abonnement Net Plus pour visionner un didacticiel avancé de Dan Wellman, qui vous apprendra comment construire un plugin jQuery plus complexe. Il vient également avec un screencast associé. Assurez-vous de vous inscrire maintenant!
