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);
};
});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);
};
});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?