Step by step to create a jQuery tabs plugin 3

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

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