Résumé des plug-ins jQuery manuscrits DIY

Résumé des plug-ins jQuery manuscrits DIY_jquery

WBOY

Libérer： 2016-05-16 16:19:11

original

1274 Les gens l'ont consulté

jQuery est un autre excellent framework JavaScript après Prototype. Il est profondément apprécié des développeurs et compte un large éventail d'utilisateurs. Une bonne chose à propos de jQuery est la personnalisation de l'utilisateur, c'est-à-dire que nous pouvons écrire nos propres plug-ins pour améliorer les différentes fonctions de jQuery, personnaliser les fonctions dont nous avons besoin, éliminer le code redondant et avoir un certain degré de flexibilité lors du chargement de la page. amélioration.

Après l'entretien, j'ai été très touché. Voulez-vous être un développeur qui connaît dix choses ou en maîtrise une ? J'ai donc passé quelques jours à étudier assidûment le code source de jQuery et à découvrir le mécanisme d'événements de jQuery, les sélecteurs et la manière dont la compatibilité des navigateurs est assurée. Depuis, j'ai toujours voulu écrire un plug-in jQuery pour simplement implémenter ma propre petite fonction.

Comme le montre l'image ci-dessus, la fonction implémentée par le plug-in est que lorsque la souris est sur un lien, le lien se déplace, et après le départ de la souris, le lien revient à sa position d'origine.

La partie centrale du HTML est

Copier le code Le code est le suivant :

Si nous utilisons simplement jQuery pour implémenter la fonction au début ci-dessus, elle serait implémentée comme ceci :

Copier le code

Le code est le suivant : $(document).ready(function() { $("#catagory a").hover(function() { $(this).animate({ paddingLeft: "20px" }, { file d'attente: false, durée: 500 }); }, fonction() {

$(this).animate({ paddingLeft: "0" }, { queue: true, durée: 500 }); });

});

Maintenant, nous encapsulons la fonction et l'écrivons sous plugin.js, puis la lions dans le fichier HTML :

Copier le code

Le code est le suivant :

(fonction ($) { 

$.fn.extend({ 

//Nom du plug-in - paddingList 

        paddingList : fonction (options) {                        
//Paramètres et valeurs par défaut 

            var defaults = {                                                       
animatePadding : 10, 

hoverColor : "Noir" 

               var options = $.extend(valeurs par défaut, options);                        
               renvoie this.each(function () {                                              
                     var o = options ;                    
//Attribuez la collection d'éléments à la variable. Dans ce cas, il s'agit de l'objet ul.
                var obj = $(this);                           
//Récupère l'objet a dans ul 

               var items = $("li a", obj);                          

                                                                                                                                                                                                                                                                                            à
items.hover(function () { 

$(this).css("color", o.hoverColor); 

//queue false signifie ne pas ajouter à la file d'attente d'animation 

                                $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, durée: 300 });

                       }, fonction () {                                                                               
$(this).css("couleur", ""); 

                                                                      $(this).animate({ paddingLeft: "0" }, { queue: true, durée: 300 });
                 });                                            

             });                                
                                                                           
}); 

})(jQuery);

Bien sûr, le plugin de lien externe a également besoin du fichier de bibliothèque jquery original de src. La façon d'appeler le plug-in est la suivante : 

Copier le code

 Le code est le suivant :

$(document).ready(function() { 

$("#catagory").paddingList({ animatePadding : 30, hoverColor : "Red" });
});