Creating tabs with CSS is usually a tedious task that involves some steps to be done. So don't we automate this process with a jQuery plugin? That's what I'm going to show you in this post. First of all, we're going to use only unordered list, because they're the best option for creating tabs (and also because they're a semantical choice). Before digging into details, let's see what is the recommended structure for writing a jQuery plugin:
(function($) {
$.fn.myPlugin = function(options) {
options = $.extend({
// default options
}, options);
return this.each(function() {
// main routines here
});
};
})(jQuery);
Everything is wrapped within a self-executing function that takes a reference to jQuery. Then we access the fn object and we define the name of our plugin. Our plugin is actually a function that accepts some options as its argument. Using the jQuery's $.extend() utility, we first create an object that will define the default options for our plugin. Then, when we'll use our main routines, we can call these options with the syntax options.option. Of course these default options can be overridden every time you use the plugin. Finally, our plugin returns the element itself (using return this) to allow the jQuery's chain to continue working as usual.
Let's see now our plugin for creating tabs, called tabs():
(function($) {
$.fn.tabs = function(options) {
options = $.extend({
wrapper: 'span',
itemStyles: {
float: 'left',
height: '100%',
padding: '0.3em 1em',
background: '#a40',
color: '#fff',
font: 'bold 1em Arial, sans-serif',
textDecoration: 'none',
borderRadius: '6px 6px 0 0',
marginRight: '5px',
listStyle: 'none'
},
wrapperStyles: {
float: 'left',
height: '100%',
textDecoration: 'none',
color: '#fff'
},
parentStyles: {
height: '100%',
overflow: 'hidden',
margin: 0,
padding: 0
}
}, options);
return this.each(function() {
var element = $(this);
if(element[0].tagName.toLowerCase() != 'ul') {
throw new Error('tabs() needs an unordered list.');
return;
}
element.css(options.parentStyles);
element.find('li').each(function() {
$(this).wrapInner('<' + options.wrapper + '></' + options.wrapper + '>')
.css(options.itemStyles).find(options.wrapper).
css(options.wrapperStyles);
});
});
};
})(jQuery);
This plugin has four options:
| Option | Description |
|---|---|
wrapper |
An element that will wrap the textual content of each list item. |
itemStyles |
CSS styles for each list item. |
wrapperStyles |
CSS styles for the wrapper of each list item. |
parentStyles |
CSS styles for unordered list. |
Our plugin also checks whether the current element is actually an unordered list. If not, it returns an error and exits. You can see a demo below.