Zusammenfassung der handgeschriebenen DIY-jQuery-Plugins

Zusammenfassung der handgeschriebenen DIY-jQuery-Plugins_jquery

WBOY

Freigeben： 2016-05-16 16:19:11

Original

1273 Leute haben es durchsucht

jQuery ist nach Prototype ein weiteres hervorragendes JavaScript-Framework. Es ist bei Entwicklern sehr beliebt und hat eine breite Palette von Benutzern. Eine gute Sache an jQuery ist die Benutzeranpassung. Das heißt, wir können unsere eigenen Plug-Ins schreiben, um die verschiedenen Funktionen von jQuery zu verbessern, die von uns benötigten Funktionen anzupassen, redundanten Code zu eliminieren und beim Laden der Seite ein gewisses Maß an Flexibilität zu haben. Verbesserung.

Nach dem Interview war ich sehr berührt. Möchten Sie ein Entwickler sein, der zehn Dinge weiß oder eines beherrscht? Deshalb habe ich ein paar Tage damit verbracht, den jQuery-Quellcode sorgfältig zu studieren und etwas über den Ereignismechanismus, die Selektoren und die Art und Weise, wie die Browserkompatibilität erreicht wird, von jQuery gelernt. Seitdem wollte ich immer ein jQuery-Plug-in schreiben, um einfach eine kleine eigene Funktion zu implementieren.

Wie im Bild oben gezeigt, besteht die vom Plug-in implementierte Funktion darin, dass sich der Link bewegt, wenn sich die Maus auf einem Link befindet, und nach dem Verlassen der Maus an seine ursprüngliche Position zurückkehrt.

Der Kernbestandteil von HTML ist

Code kopieren Der Code lautet wie folgt:

Wenn wir einfach jQuery verwenden, um die Funktion oben oben zu implementieren, würde sie wie folgt implementiert werden:

Code kopieren

Der Code lautet wie folgt: $(document).ready(function() { $("#catagory a").hover(function() { $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 }); }, function() {

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

});

Jetzt kapseln wir die Funktion und schreiben sie als „plugin.js“ und verknüpfen sie dann in der HTML-Datei:

Code kopieren

Der Code lautet wie folgt:

(Funktion ($) { 

$.fn.extend({ 

//Plug-in-Name – paddingList 

        paddingList: Funktion (Optionen) {                        
//Parameter und Standardwerte 

            var defaults = {                                                          
animatePadding: 10, 

hoverColor: „Schwarz“ 

               var options = $.extend(defaults, options);                        
               return this.each(function () {                                            
                     var o = Optionen;                    
//Weisen Sie die Elementsammlung der Variablen zu. In diesem Fall ist es das ul-Objekt
                var obj = $(this);                           
// Holen Sie sich das a-Objekt in ul 

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

                                                                                                                                                                                                                                                                                            Zu
items.hover(function () { 

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

//queue false bedeutet, dass nichts zur Animationswarteschlange hinzugefügt wird 

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

                       }, function () {                                                                           
$(this).css("color", "");
                                                                      $
                 });                                           

             });                                
                                                                       
}); 

})(jQuery);

Natürlich benötigt das externe Link-Plugin auch die ursprüngliche JQuery-Bibliotheksdatei von src. Der Aufruf des Plug-Ins erfolgt wie folgt: 

Code kopieren

 Der Code lautet wie folgt:

$(document).ready(function() { 

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