Ersetzen Sie „yourPluginName“ durch den tatsächlichen Namen Ihres Plugins. Die Sache mit „radius“ ist nur ein Beispiel für eine Option (ein Parameter, der an das Plugin übergeben wird).
(function($){
$.yourPluginName = function(el, radius, options){
// To avoid scope issues, use 'base' instead of 'this'
// to reference this class from internal events and functions.
var base = this;
// Access to jQuery and DOM versions of element
base.$el = $(el);
base.el = el;
// Add a reverse reference to the DOM object
base.$el.data("yourPluginName", base);
base.init = function(){
if( typeof( radius ) === "undefined" || radius === null ) radius = "20px";
base.radius = radius;
base.options = $.extend({},$.yourPluginName.defaultOptions, options);
// Put your initialization code here
};
// Sample Function, Uncomment to use
// base.functionName = function(paramaters){
//
// };
// Run initializer
base.init();
};
$.yourPluginName.defaultOptions = {
radius: "20px"
};
$.fn.yourPluginName = function(radius, options){
return this.each(function(){
(new $.yourPluginName(this, radius, options));
// HAVE YOUR PLUGIN DO STUFF HERE
// END DOING STUFF
});
};
})(jQuery);
Verwendung
$(function() {
$("#round-me").yourPluginName("20px");
});
Das ist sehr nützlich, danke!
Ein weiteres sehr schönes und nützliches Snippet!
Mach weiter so!
Schöne Vorlage. Ganz anderes Layout als andere, die ich gesehen habe, aber ich werde das auf jeden Fall ausprobieren.
Hier ist eine alternative jQuery Plugin Vorlage.
Danke
Schöne Vorlage.
Diese Vorlage unterscheidet sich völlig von den jQuery-Dokumenten. Gibt es Vorteile bei dieser Art von Vorlagenformat?
Ich finde diese Vorlage am besten von allen, die ich verwendet habe. Sie war mein Ausgangspunkt für die letzten paar Jahre.
Ich folge der Logik seiner Organisation nicht ganz. Ich denke, es wäre leichter zu verstehen, wenn Ihr Beispiel einige ereignisgesteuerte Funktionalität hätte.
Wie würden Sie bei dieser Vorlage Funktionen öffentlich machen?
z.B. Zugriff auf eine Funktion namens base.foo?
Prost!
Sie können auf etwas wie base.foo zugreifen, indem Sie die umgekehrte Referenz im DOM-Objekt verwenden.
$(‘someElement’).data(‘pluginName’).foo();
Ich frage mich auch nach der Antwort auf Peters Frage. Jemand?
Dieses Plugin-Design wird nicht vom offiziellen jQuery-Team verwendet, da es den jQuery-Funktionsnamensraum verschmutzt. Die jQuery-Version ist besser, da sie es Ihnen ermöglicht, das „this“-Schlüsselwort auf natürlichere Weise zu verwenden.
+1: Dies ist nicht die offizielle jQuery-Methode aufgrund von Namensraumverschmutzung. Sie können immer noch auf „this“ auf andere Weise zugreifen – Sie benötigen kein „base“.
Gibt es eine Chance, dass diese mit IE funktionieren? Ich bekomme Banding in den linken Ecken – wahrscheinlich auch rechts, aber sie sind außerhalb des Divs. Ich bin auf die Bildschaltflächen angewiesen, bis das funktioniert, oder es gibt eine andere Lösung… Irgendwelche Ideen – außer IE6,7,8,9 zu ignorieren?
Obwohl dieses Plugin eine unregelmäßige Struktur aufweist, verschmutzt es den
$.fn-Namensraum überhaupt nicht. Solange Sie Ihre Funktionen so deklarierenAlle Funktionen sind unter
$.yourPluginNameim Namensraum angesiedelt. Das liegt daran, dass alles in der Haupt-Plugin-Closure gekapselt ist.Zusätzlich ist die Verwendung von
baseanstelle vonthisintelligent, da sie den unerfahrenen Benutzer davon abhält, es mitthisim Kontext einer anderen Funktion zu verwechseln.Wenn Sie beispielsweise in
base.init()aufthisverweisen, beziehen Sie sich auf die Init-Funktion selbst, nicht auf Ihr Plugin. Die Verwendung vonbasemacht deutlich, was zum Plugin gehört und was nicht.warum das tun
$.fn.yourPluginName = function(radius, options){
return this.each(function(){
(new $.yourPluginName(this, radius, options));
Das ist perfekt über alle Maßen.