Heim > Web-Frontend > js-Tutorial > Hauptteil

Empfehlen Sie ein jQuery-Plug-in template_jquery

WBOY
Freigeben: 2016-05-16 16:21:26
Original
943 Leute haben es durchsucht

Ich verwende jQuery schon seit einiger Zeit und schreibe oft Plugins dafür. Ich habe verschiedene Möglichkeiten ausprobiert, es zu schreiben, und jetzt ist diese Vorlage meine Lieblingsvorlage:

Code kopieren Der Code lautet wie folgt:

;(function($) {
// Hier können mehrere Plugins untergebracht werden
(function(pluginName) {
var defaults = {
      Farbe: 'schwarz',
       testFor: function(div) {
        return true;
}
};
$.fn[pluginName] = function(options) {
Optionen = $.extend(true, {}, Standardwerte, Optionen);
                                                                    Geben Sie this.each(function() {
zurück var elem = dies,
             $elem = $(elem);

// hier ist der Kern des Plugins
If (options.testFor(elem)) {
$elem.css({
borderWidth: 1,
borderStyle: 'solid',
                 borderColor: options.color
            });
          }
});
};
$.fn[pluginName].defaults = defaults;
})('borderize');
})(jQuery);

//Das Folgende ist die Verwendung
$('div').borderize();
$('div').borderize({color: 'red'});

Hier sind die Gründe, warum mir diese Vorlage gefällt

1. Sie können weiterhin auf die darin enthaltenen Standardoptionen zugreifen, auch wenn diese überschrieben werden (einfacher Zugriff über das übergeordnete Attribut)

 2. Sie können den Namen des Plug-Ins ändern, indem Sie den PluginName ändern. (Diese Methode ist auch für die Codekomprimierung sehr vorteilhaft)

Punkt Nr. 1 ist sehr wirkungsvoll. Wenn wir diese Methode beispielsweise überschreiben, aber dennoch die ursprüngliche Methode beibehalten möchten, können wir uns das folgende Beispiel ansehen:

Code kopieren Der Code lautet wie folgt:
$('.borderize').borderize({
TestFor: function(elem) {
        var $elem = $(elem);
If (elem.is('.inactive')) {
              return false;
         } sonst {
                          // Aufruf der „übergeordneten“ Funktion
                   return $.fn.borderize.defaults.testFor.apply(this, arguments);
}
}
});
Wir können dies sogar mit regulären Eigenschaften wie dieser tun

var someVarThatMayBeSet = false;
/* Code ... */

$('.borderize').borderize({
Farbe: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color
});

Freunde, diese jQuery-Plug-in-Vorlage wird Ihnen auch gefallen, sie ist so flexibel.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage