亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

手把手教你開發jquery插件(二)

標簽:
Html/CSS 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; 

    });
點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消