arrow

jQuery Plugins

Plugins are very useful for those with limited knowledge about jQuery, but still want to use it's features and can even make changing variables of your own jQuery much easier. Here we are going to show 2 examples of the same plugin, one where the variables are set and another where they can be changed.

Basic Plugin

The idea of a basic plugin, is a bit of jQuery that someone can simply copy and paste, then call up whenever they need it. Here we have a script that will change the background of the following div depending on what day it is.

$('.backgroundday')
.dayChanger();
});
/* Here is where we call up the function. We target something with a class of backgroundday then simply call up the dayChanger function */

(function($) {
$.fn.dayChanger = function() {
/* This starts the shell of the plugin. We then make a new function named dayChanger */

var d = new Date();
var date = d.getDay();
/* Here is where we get the date, then store the day inside of the date variable */

if (date == 0) {
$(this).css({
'background-color':'url(lib/images/sunday.jpg)'
});
/* Here we make an if statment that says, if the date variable is equal to 0, aka sunday, then add some css to whatever is selected */

} else if (date == 1) {
$(this).css({
'background-image':'url(lib/images/sunday.jpg)'
});
/* Now we just repeat the above if statment with an if else for each day of the week */

}else if (date == 2) {
$(this).css({
'background-color':'url(lib/images/monday.jpg)'
});
}else if (date == 3) {
$(this).css({
'background-color':'url(lib/images/tuesday.jpg)'
});
}else if (date == 4) {
$(this).css({
'background-color':'url(lib/images/wedendsday.jpg)'
});
}else if (date == 5) {
$(this).css({
'background-color':'url(lib/images/thursday.jpg)'
});
}else if (date == 6) {
$(this).css({
'background-color':'url(lib/images/friday.jpg)'
});
};
}
})(jQuery);
/* And finally at the end we end our plugin with a jQuery */


Plugin with Options

The above example is nice and works, but not much use unless the person knows enough about jQuery to go into the code and change the images themselves. This is where a plugin with options comes into play.

$(document).ready(function() {
$('.backgroundday2')
.dayChanger2({
sunday : 'url(lib/images/sunday.jpg)',
monday : 'url(lib/images/monday.jpg)',
tuesday : 'url(lib/images/tuesday.jpg)',
wendsday : 'url(lib/images/wedendsday.jpg)',
thursday : 'url(lib/images/thursday.jpg)',
friday : 'url(lib/images/friday.jpg)',
saturday : 'url(lib/images/saturday.jpg)'
});
/* This works just like in the last script, except this time we can select our own images to use by using the property , value format */

});
(function($) {
$.fn.dayChanger2 = function(options) {
options = $.extend({}, $.fn.dayChanger2.defaults, options);
/* This is the shell of the plugin again, this time we add an options variable and send it down the function. */

var d = new Date();
var date = d.getDay();
/* Here we get the day just like before */

if (date = 0) {
$(this).css({
'background-color':options.sunday
});
/* Now we do the same as in the pervious plugin, except this time instead of putting a set css, we use the options variable and give it a property to look for */

} else if (date == 1) {
$(this).css({
'background-image':options.monday
});
/* And just like before we repeat the process for each day, giving the options a new property to look for each time */

}else if (date == 2) {
$(this).css({
'background-color':options.tuesday
});
}else if (date == 3) {
$(this).css({
'background-color':options.wendsday
});
}else if (date == 4) {
$(this).css({
'background-color':options.thursday
});
}else if (date == 5) {
$(this).css({
'background-color':options.friday
});
}else if (date == 6) {
$(this).css({
'background-color':options.saturday
});
};
}
$.fn.dayChanger2.defaults = {
sunday : 'url(lib/images/broken.jpg)',
monday : 'url(lib/images/broken.jpg)',
tuesday : 'url(lib/images/broken.jpg)',
wendsday : 'url(lib/images/broken.jpg)',
thursday : 'url(lib/images/broken.jpg)',
friday : 'url(lib/images/broken.jpg)',
saturday : 'url(lib/images/broken.jpg)'
};
/* One last change is here at the bottom. Here we call up the defaults function and give each of the properties we listed a default value, just incase the user does not enter anything. */

})(jQuery);
/* And last we end the same way as before */