手把手教你開發jquery外掛（二）

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

    })

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; 

    });

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; 

    })；