Step by step to create a jquery tabs Plugin-3

First, I want to addOptionsTo 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?