For better understanding of plugins writing technique let’s choose any simple task having at least some practical value. Let’s write jQuery plugin which set different colors for odd and even table rows. Besides, we should have ability to pass font and background colors values for odd and even rows as an arguments. It will be better if we can change font and background colors during mouse movement over the table row. The task is defined so let’s start!
First of all we should remember the main rules of the jQuery plugins writing:
- plugin filename should be look like this: jquery.[plugin_name].js;
- all new methods should be attached to jQuery.fn object, all functions should be attached to the jQuery object;
- this - it’s a refference to the current jQuery object;
- any functions or methods that you attached shoud have semicolon at the end, or the code can breaks during compression;
- method should return jQuery object unless you notice about other return value;
- you should use this.each for iterating over current set of elements;
- always use jQuery instead of $ sign in your code, that allow users to change pseudonym for jQuery in one place.
Folowing the first rule let’s call our plugin file jquery.stripy.js and first thing that we write there will be plugin definition:
jQuery.fn.stripy = function() {
// place for our code
}; |
Now, we can call it like this:
Our plugin should be able to receive some arguments, so let’s modify our code a bit:
jQuery.fn.stripy = function(options) {
// place for our code
}; |
where options - is an object that can contain user settings. But we should define default settings also, because user can ignore our plugin’s arguments.
We should use jQuery.extend(object) for this purpose.
jQuery.fn.stripy = function(options) {
// default settings
var options = jQuery.extend( {
background_even: '#FFC080', // background color for even rows
background_odd: '#FFDFBF', // background color for odd rows
font_even: '#AA7239', // font color for even rows
font_odd: '#AA7239', // font color for odd rows
background_hover: '#FF8000', // hover background color
font_hover: '#55391C' // hover font color
},options);
// place for our code
}; |
Options - is an object, consisting of key/value pairs which contains plugin settings. If no settings is specified - we will use default settings. If user will send some options (or all options) to our plugin - we will use exactly them.
Now, we should remember two plugin writing rules more. We need iterate over current elements set and return jQuery object. Let’s do it:
jQuery.fn.stripy = function(options) {
// default settings
var options = jQuery.extend( {
background_even: '#FFC080', // background color for even rows
background_odd: '#FFDFBF', // background color for odd rows
font_even: '#AA7239', // font color for even rows
font_odd: '#AA7239', // font color for odd rows
background_hover: '#FF8000', // hover background color
font_hover: '#55391C' // hover font color
},options);
return this.each(function() {
// place for our code
});
}; |
We know that this - it is a refference to the current jQuery object. In our case this contains object refference that defined by our plugin user in jQuery selector, for example:
In this example, jQuery object contains table or tables with my class.
Now we should write code that realize our functionality.
First of all, let’s find even rows:
jQuery(this).find('tr:even'); |
We need to set background and font colors for our rows, let’s use css-properties background-color and color for this:
jQuery(this).find('tr:even')
.css('background-color', options.background_even)
.css('color', options.font_even); |
We setting up css-properties background-color и color for all rows in current elements set (it’s even rows of our current table) getting it from options object.
Let’s process mouse movement over table row:
jQuery(this).find('tr:even')
.css('background-color', options.background_even)
.css('color', options.font_even)
.hover(
function() {
jQuery(this)
.css('background-color', options.background_hover)
.css('color', options.font_hover);
},
function() {
jQuery(this)
.css('background-color', options.background_even)
.css('color', options.font_even);
}
); |
We use hover() method from jQuery library, first argument - function, that set up css-properties during mouse pointer moving over the row and second argument - function, that return old values when mouse pointer moving out of the row.
Finally, we should add same code for odd rows and here is our plugin:
jQuery.fn.stripy = function(options) {
// default settings
var options = jQuery.extend( {
background_even: '#FFC080', // background color for even rows
background_odd: '#FFDFBF', // background color for odd rows
font_even: '#AA7239', // font color for even rows
font_odd: '#AA7239', // font color for odd rows
background_hover: '#FF8000', // hover background color
font_hover: '#55391C' // hover font color
},options);
return this.each(function() {
//even rows
jQuery(this).find('tr:even')
.css('background-color', options.background_even)
.css('color', options.font_even)
.hover(
function() {
jQuery(this)
.css('background-color', options.background_hover)
.css('color', options.font_hover);
},
function() {
jQuery(this)
.css('background-color', options.background_even)
.css('color', options.font_even);
}
);
//odd rows
jQuery(this).find('tr:odd')
.css('background-color', options.background_odd)
.css('color', options.font_odd)
.hover(
function() {
jQuery(this)
.css('background-color', options.background_hover)
.css('color', options.font_hover);
},
function() {
jQuery(this)
.css('background-color', options.background_odd)
.css('color', options.font_odd);
}
);
});
}; |
So now we have small but working plugin. But we should do another one important thing - write documentation for our plugin.
About jquery.stripy.js plugin.
Plugin jquery.stripy.js allow you easy change font and background colors for odd and even table rows and also change row color under the mouse pointer. Plugin is compatible with IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+.
Installation.
Include jQuery library and plugin files:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.stripy.js"></script> |
Usage.
1. Plugin usage with default settings.
<script type="text/javascript">
$(document).ready(function() {
$("table.my_class").stripy();
});
</script> |
In this example plugin work with table (or tables) which has my_class class. Different css-rules will be applied to the odd and even table rows, as a result they will have different font and background colors.
2. Plugin usage with user settings.
<script type="text/javascript">
$(document).ready(function() {
$("table.my_class").stripy({
background_even: '#CC66CC',
background_odd: '#E6ACE6',
font_even: '#662266',
font_odd: '#662266',
background_hover: '#331133',
font_hover: '#FFFFFF'
});
});
</script> |
In this example we pass object with user settings to plugin as an argument.
Available options.
background_even - string: background color for even rows.
background_odd - string: background color for odd rows.
font_even - string: font color for even rows.
font_odd - string: font color for odd rows.
background_hover - string: background color during mouse pointer moving over row.
font_hover - string: font color during mouse pointer moving over row.
Demonstration.
Demo is available here.
Here you can download demo source code with all needed files.
That’s all! Now you know how to write your own jQuery plugin. Enjoy!
Alex
Add comment 