Step by step to create a jQuery tabs plugin - 3

First, i want to add options to Tabs constructor like this:

var tabs = $("div.tabs").tabs({
"openEvent": "mouseover",
"disabled": [1, 2],
"current": 3
});

These options are borrowed from jQuery UI
Tabs:

openEvent:(String,"click")
The type of event to be used for selecting a tab.
disabled:(Array,[])
An array containing the position of the tabs (zero-based index) that should be disabled on initialization.
current:(Number,0)
Zero-based index of the tab to be selected on initialization. To set all tabs to unselected pass -1 as value.

The plugin code:

(function($) {

function Tabs(tabs, panes, options) {
var that = this;
this.options = {
"openEvent": "mouseover",
"disabled": [],
"current": 0
};
$.extend(this.options, options);
this.tabs = tabs.removeClass("current");
this.panes = panes.hide();
this.current = this.options.current;

this.openTab(this.current);

this.tabs[this.options.openEvent](function() {
that.openTab(that.tabs.index(this));
});
}

Tabs.prototype = {
openTab: function(index) {
this.current = index;
if (this.current !== -1 && $.inArray(this.current, this.options.disabled) === -1) {
this.tabs.removeClass("current").eq(this.current).addClass("current");
this.panes.hide().eq(this.current).show();
}
}
};

$.fn.tabs = function(options) {

var tabs = this.children("ul").find("li > a");
var panes = this.children("div");

return new Tabs(tabs, panes, options);
};

})(jQuery);

Second, add some events to the plugin like this:

var tabs = $("div.tabs").tabs({
"openEvent": "mouseover",
"disabled": [1, 2],
"current": 3,
"events": {
"open": function(event, index) {
console.log("[events-open]You click tab " + index);
}
}
});

The plugin source code:

(function($) {

function Tabs(tabs, panes, options) {
var that = this;
this.options = {
"openEvent": "mouseover",
"disabled": [],
"current": 0,
"events": {}
};
$.extend(this.options, options);
this.tabs = tabs.removeClass("current");
this.panes = panes.hide();
this.current = this.options.current;

$.each(this.options.events, function(key, value) {
$(that).bind(key, value);
});

// Open current tab
this.openTab(this.current);

// Register open tab event
this.tabs[this.options.openEvent](function() {
that.openTab(that.tabs.index(this));
});
}

Tabs.prototype = {
openTab: function(index) {
this.current = index;
if (this.current !== -1 && $.inArray(this.current, this.options.disabled) === -1) {
this.tabs.removeClass("current").eq(this.current).addClass("current");
this.panes.hide().eq(this.current).show();

$(this).trigger("open", [this.current]);
}
}
};

$.fn.tabs = function(options) {

var tabs = this.children("ul").find("li > a");
var panes = this.children("div");

return new Tabs(tabs, panes, options);
};

})(jQuery);

The result:

[events-open]You click tab 3
[events-open]You click tab 4
[events-open]You click tab 0

Notice: In this section, we bind event to a JavaScript object not the jQuery object,
which i have mentioned in my last
article.

Third, add some methods so that we can invoke like this:

tabs.bind("open", function(event, index) {
console.log("[bind-open]You click tab " + index);
});

Source code:

Tabs.prototype = {
openTab: function(index) {
// ...
},
bind: function(name, fn) {
$(this).bind(name, fn);
}
};

The result:

[events-open]You click tab 3
[events-open]You click tab 4
[bind-open]You click tab 4
[events-open]You click tab 3
[bind-open]You click tab 3
[events-open]You click tab 0
[bind-open]You click tab 0

Well, this series of tutorials has been finished. Pretty simple, isn’t it?