Skip to content

Instantly share code, notes, and snippets.

@malsup
Created March 20, 2009 03:16
Show Gist options
  • Save malsup/82183 to your computer and use it in GitHub Desktop.
Save malsup/82183 to your computer and use it in GitHub Desktop.
jQuery Plugin Template
// don't declare anything out here in the global namespace
(function($) { // create private scope (inside you can use $ instead of jQuery)
// functions and vars declared here are effectively 'singletons'. there will be only a single
// instance of them and they are not publicly accessible. so this is a good place to declare
// any immutable items or stateless functions. for example:
function myPrivateHelper() {
// some helper fn
};
// next, declare the plugin function
$.fn.myPlugin = function(options) {
// functions and vars declared here are created each time your plugn function is invoked
// and have access to the options passed to your plugin fn
function anotherHelper() {
// helper fn that has access to 'options'
};
// iterate the matched nodeset (and return 'this')
return this.each(function() {
var $this = $(this);
// functions and vars declared here are created for each matched element. so if
// your functions need to manage or access per-node state you can define them
// here and use $this to get at the DOM element
});
};
// finally, I like to expose default plugin options as public so they can be manipulated. one
// way to do this is to add a property to the already-public plugin fn
$.fn.myPlugin.defaults = {
// whatever options you intend to be customizable, for example
color: 'black'
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment