Replace instances of “yourPluginName” with your actual plugin name. The stuff about “radius” is just an example of an option (parameter to pass plugin).
(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);
Usage
$(function() {
$("#round-me").yourPluginName("20px");
});
That’s very useful, thanks!
Another very nice and useful snippet!
keep up the good work!
Nice template. Quite a different layout from others I’ve seen, but will definitely give this a go.
Here’s an alternative jQuery plugin template.
Thanks
Nice template.
This template is totally different from jquery docs. Are their any benefits to this type of template format?
I find this template the best out of all the ones I’ve used. It’s been my starting point for the past couple years.
I don’t completely follow the logic of its organization. I think it would be easier to understand if your example had some event driven functionality.
How would you go about making functions public with this template?
e.g. access a function called base.foo?
Cheers!
You can access something like base.foo by using the reverse reference in the DOM object.
$(‘someElement’).data(‘pluginName’).foo();
I’m also wondering the answer to Peter Gs question. Anyone?
This plugin design is not used by the official jQuery team because is pollutes the jQuery function namespace. The jQuery version is better since it allows you to use the “this” keyword in a more natural context.
+1: This is not the official jQuery way due to namespace pollution. You can still access ‘this’ in other ways – you do not need ‘base’.
Any chance these can work with ie? I get banding in the left corners – probably on the right too, but they our outside the div. I am stuck with the image buttons until this works, or there is some other work around… Any ideas – besides ignoring ie6,7,8,9?
Although this plugin does have an irregular structure, It does not pollute the
$.fn
namespace at all. As long as you declare you functions like so:All functions are namespaced under
$.yourPluginName
. This is because everything is wrapped in the main plugin closure.Additionally, the use of
base
in place ofthis
is smart, because it prevents the novice user from confusing it withthis
in the context of another function.For instance, if you refer to
this
inside ofbase.init()
, you are referring to the init function itself, not your plugin. Usingbase
makes it clear what belongs to the plugin, and what doesn’t.why doing this:
$.fn.yourPluginName = function(radius, options){
return this.each(function(){
(new $.yourPluginName(this, radius, options));
This is beyond perfect.