Code Snippet
jQuery Plugin Template
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!
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.