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.