Step by step to create a jquery tabs Plugin-2

I have said that I dislike jquery UI's unified API, so I want
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 thatTabsIs defined in the self-execution function, so it will be hidden
From the outside world.

And we publicClicktabMetod 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);