Step by step to create a jQuery tabs plugin - 2

最新推荐文章于 2025-08-19 08:41:01 发布

weixin_34209851

最新推荐文章于 2025-08-19 08:41:01 发布

阅读量75

点赞数

文章标签： javascript ui ViewUI

本文介绍如何修改jQuery插件代码以实现自定义组件实例化，并提供了扩展组件功能的方法。通过示例展示了如何获取组件实例及添加新的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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