Step by step to create a jQuery tabs plugin - 2

I have said that i dislike jQuery UI’s unified API, so i want to
get the instance of the component after invoke like this:

$(function() {
var tabs = $("div.tabs").tabs();

// Note: Now tabs is the instance of the component
window.setTimeout(function() {
tabs.clickTab(2);
}, 2000);
});

To achieve this, i modified the plugin code:

(function($) {

function Tabs(tabs, panes) {
var that = this;
this.tabs = tabs;
this.panes = panes;
this.current = 0;

this.clickTab(0);

this.tabs.click(function() {
that.clickTab(that.tabs.index(this));
});
}

Tabs.prototype = {
clickTab: function(index) {
this.current = index;
this.tabs.removeClass("current").eq(this.current).addClass("current");
this.panes.hide().eq(this.current).show();
}
};

$.fn.tabs = function() {

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

return new Tabs(tabs, panes);
};

})(jQuery);

Note that Tabs is defined in the self-execution function, so it will be hidden
from the outside world.

And we public the clickTab metod in the prototype. I works well.

This article is over, below is some advance topics.

====================================================

How to extend Tabs class?

It maybe a little difficult because it’s a private function.

Never mind, just change the prototype of $.fn.tabs:

(function($) {

function Tabs(tabs, panes) {
// ...
}

Tabs.prototype = {
// ...
};

$.fn.tabs = function() {

// ...
};

$.fn.tabs.prototype = Tabs.prototype;

})(jQuery);

We can extend the Tabs class like this:

$.fn.tabs.prototype.getLength = function() {
return this.tabs.length;
};

$(function() {
var tabs = $("div.tabs").tabs();
alert(tabs.getLength());
});

Or we can use the method introduced in jQuery core, which is described in
my last post.

(function($) {

$.fn.tabs = function() {

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

return new $.fn.tabs.prototype.init(tabs, panes);
};

$.fn.tabs.prototype = {
init: function(tabs, panes) {
var that = this;
this.tabs = tabs;
this.panes = panes;
this.current = 0;

this.clickTab(0);

this.tabs.click(function() {
that.clickTab(that.tabs.index(this));
});
},

clickTab: function(index) {
this.current = index;
this.tabs.removeClass("current").eq(this.current).addClass("current");
this.panes.hide().eq(this.current).show();
}
};

$.fn.tabs.prototype.init.prototype = $.fn.tabs.prototype;

})(jQuery);