jQuery Plugin Template

Whenever I start a new jQuery plugin I always find myself rebuilding the whole plugin. Here's some example code that's just a copy+paste away from becoming a new contribution to my favorite JS framework! Simply grab the code below and paste it into your plugin file (PLUGIN_NAME.jquery.js):
jQuery.fn.PLUGIN_NAME = function(o) {
// Defaults
var o = jQuery.extend( {
var1: 'some_variable',
var2: 'some_variable',
var3: 'some_variable'
},o);
$(this).each(function(){
// Perform actions on item here
});
};
That's all there is to it. Define your variables and build your function in the $(this).each... section (or kill it and only apply it to one item - it's your plugin. You call the passed in (or default) variables using - for example - "o.var1".
For beginners out there - you would then call this plugin by including the plugin as per usual then calling it and applying those variables...
$('#SOME_ITEM').PLUGIN_NAME({
var1: 'custom_variable_setting',
var2: 'custom_variable_setting',
var3: 'custom_variable_setting'
});Responses to this Article:
Loading Comments...
I am a web developer, designer, and consultant located in the La Crosse / Onalaska Wisconsin region with
over twelve years experience developing and managing projects ranging from large applications and cloud-based
business solutions to social/new media campaigns, to complete system and infrastructure implementation.