Last time we learned building an optionless jQuery plugin. But without options, a plugin is nothing but a mere function. This time we are going to focus how to add options to a plugin and extend its functionality. Our sample plugin is going to be a tab navigation plugin. You can read the first part if you haven’t see the first part of this lesson.
For a printable reference guide to the jQuery API I suggest you to download this interesting jQuery Visual Cheat Sheet designed by Antonio Lupetti or take a look at the official jQuery documentation.
Now let’s start coding with our empty template.
(function($){
$.fn.woorkTabs = function(){
// all plugin stuff will be here
};
})(jQuery);
In a plugin, you can use options either with their predefined (default) values or with their newly assigned values. So for our default values, we need to add a definition part in our plugin.
(function($){
$.fn.woorkTabs = function(){
// all plugin stuff will be here
}; $.fn.woorkTabs.defaults = {
navigation: '#tabs a',
pages : '.page'
}
})(jQuery);
where $.fn.woorkTabs.defaults part is the default value for the options in the plugin. Each option can be defined as option_name : ‘option value’. For values like numbers or true false statements you do not need to use quotation marks e.g. option_name : true or option_name : 1500 There are two things to remember: you should always define a value with a semicolon ( : ) and every option should be separated by comma (,) from each other. But for our beloved internet explorer compatibility, you should remove comma after the last option.
After adding default option values, we need to call them in our plugin.
(function($){
$.fn.woorkTabs = function(options){
var $options = $.extend({}, $.fn.woorkTabs.defaults, options);
}; $.fn.woorkTabs.defaults = {
navigation: '#tabs a',
pages : '.page'
}
})(jQuery);
So we add a variable names $options to extend the plugin’s default options. This new extend() function merges the default settings with newly defined option values while calling the plugin. We can get this options by $options.option_name syntax for using them in the functions. Also notice that, we add a keyword options in the $.fn.woorkTabs = function(options) part to get the options new values while calling the plugin. After adding our return this.each(function(){}); statement, initial setup for the plugin is finished.
(function($){
$.fn.woorkTabs = function(options){
var $options = $.extend({}, $.fn.woorkTabs.defaults, options);
return this.each(function(){
});
}; $.fn.woorkTabs.defaults = {
navigation: '#tabs a',
pages : '.page'
}
})(jQuery);
In our page we can call this plugin either with defaults or with new values like
$(target1).woorkTabs(); $(target2).woorkTabs({
navigation : '#tabnav a',
pages : '#example .pages'
});
Many of you know what a tabbed navigation is. The main idea is by clicking the links in a navigation list, target content become visible in the page and others become invisible.
Start with getting options,
var $navigation = $options.navigation;
var $pages = $options.pages;
Since the main idea is clicking something, we need to use click() event. This function triggers anything you defined inside the function when mouse clicked the target. In our case, when user clicks the tab, first plugin finds the target content, then hides other contents and shows the target. But first of all, let’s see how our html will look like.
<div id="tabs"> <ul>
<li><a href="#tabcontent1">Tab Content 01</a></li>
<li><a href="#tabcontent2">Tab Content 02</a></li>
<li><a href="#tabcontent3">Tab Content 03</a></li>
</ul> <div id="tabcontent1">
<p>This the first tab page for example</p>
</div>
<div id="tabcontent2">
<p>This the second tab page for example</p>
</div>
<div id="tabcontent3">
<p>This the last tab page for example</p>
</div>
</div>
In the navigation list, all links represents our tabs and they are targeting the pages ids according to their href values. We can get the content’s id, which will be visible, easily by clicked tab’s href attribute.
$($navigation).click(function(){
var $e = $(this);
var $goingToShow = $e.attr('href');
});
As in the previous lesson $e variable is for calling freely the clicked element. With the attr() function we can get any attribute’s value from the element. In this case, we need the href attributes. Notice that, the href value is start with “#” which indicates id in jQuery selectors, we can directly use the $goingToShow variable in the process. The following step is, showing the clicked tab’s content and hiding the other tabs’ contents. show() and hide() effects are the most appropriate functions for this work. show() function shows the element by setting it’s css display property to “block” and hide() function hides the element by setting it’s css display property to “hidden”.
$($navigation).click(function(event){
event.preventDefault(); var $e = $(this);
var $goingToShow = $e.attr('href'); $pages.hide();
$goingToShow.show(); $($navigation).removeClass('active');
$e.addClass('active');
});
We hide the all tab pages by $pages.hide() then show the clicked tab’s page. Also we remove the ‘active’ class from the tabs add add ‘active’ class to clicked tab to be able to define visual properties in css for our active tab. And lastly, for prevent jumping the page due to link fragment in our tab’s href attribute. Overall plugin is as follows
(function($){
$.fn.woorkTabs = function(options){
var $options = $.extend({}, $.fn.woorkTabs.defaults, options); return this.each(function(){
var $navigation = $options.navigation;
var $pages = $options.pages; $($navigation).click(function(event){
event.preventDefault(); var $e = $(this);
var $goingToShow = $e.attr('href'); $pages.hide();
$goingToShow.show(); $($navigation).removeClass('active');
$e.addClass('active');
});
}; $.fn.woorkTabs.defaults = {
navigation: '#tabs a',
pages : '.page'
}
})(jQuery);
Example
Here is the HTML code:
<div id="tabs">
<ul>
<li><a href="#tabcontent1">Tab Content 01</a></li>
<li><a href="#tabcontent2">Tab Content 02</a></li>
<li><a href="#tabcontent3">Tab Content 03</a></li>
</ul> <div id="tabcontent1">
<p>This the first tab page for example</p>
</div> <div id="tabcontent2">
<p>This the second tab page for example</p>
</div> <div id="tabcontent3">
<p>This the last tab page for example</p>
</div> </div>
JavaScript
Here is the JavaScript code:
$(function(){
$("#tabs").woorkTabs({
navigation: "#tabnav a"
});
});
Take a look at the live example here.
