如何扩展 Twitter Bootstrap 插件 [英] How to Extend Twitter Bootstrap Plugin

问题描述

我正在研究 Twitter 的 Bootstrap，现在想尝试为插件添加一些功能，但我不知道如何去做.以模态插件为例(http://twitter.github.com/bootstrap/javascript.html#modals)，我想向插件添加一个新函数，该函数可以像标准插件方法一样调用.我认为最接近的是以下代码，但是当我尝试访问时，我得到的只是该函数不是对象的一部分.

I am digging into Twitter's Bootstrap and now want to try and add some functionality to the plugins, but I can't figure out how to do so. Using the modal plugin as an example (http://twitter.github.com/bootstrap/javascript.html#modals), I'd like to add a new function to the plugin that can be called as one would the standard plugin methods. THe closest I think I have come is with the following code, but all I get when I try to access is that the function is not part of the object.

有什么建议吗?这是我尝试过的似乎最接近我需要做的事情:

Any suggestions? This is what I have tried that seems to be the closest to what I need to do:

 $.extend($.fn.modal, { 
    showFooterMessage: function (message) { 
        alert("Hey"); 
    } 
}); 

那么我想这样称呼它:

  $(this).closest(".modal").modal("showFooterMessage"); 

好的，我想出了如何做到这一点:

OK, I figured out how to do this:

(function ($) {
    var extensionMethods = {
        displayFooterMessage: function ($msg) {
            var args = arguments[0]
            var that = this;

            // do stuff here
        }
    }

    $.extend(true, $.fn.modal.Constructor.prototype, extensionMethods);
})(jQuery);

现有 Bootstrap 插件集的问题在于，如果有人想扩展它们，则没有一个新方法可以接受参数.我试图修复"这个问题是在插件函数调用中添加对参数的接受.

The problem with the existing set of Bootstrap plugins is that if anyone wants to extend them, none of the new methods can accept arguments. My attempt to "fix" this was to add the acceptance of arguments in the plugins function call.

$.fn.modal = function (option) {
    var args = arguments[1] || {};
    return this.each(function () {
        var $this = $(this)
        , data = $this.data('modal')
        , options = typeof option == 'object' && option

        if (!data) $this.data('modal', (data = new Modal(this, options)))

        if (typeof option == 'string') data[option](args)
        else data.show()

    }) // end each
} // end $.fn.modal

推荐答案

这是一个旧线程，但我只是使用以下模式对模态进行了一些自定义扩展:

This is an old thread, but I just made some custom extensions to modal using the following pattern:

// save the original function object
var _super = $.fn.modal;

// add custom defaults
$.extend( _super.defaults, {
    foo: 'bar',
    john: 'doe'
});

// create a new constructor
var Modal = function(element, options) {

    // do custom constructor stuff here

     // call the original constructor
    _super.Constructor.apply( this, arguments );

}

// extend prototypes and add a super function
Modal.prototype = $.extend({}, _super.Constructor.prototype, {
    constructor: Modal,
    _super: function() {
        var args = $.makeArray(arguments);
        _super.Constructor.prototype[args.shift()].apply(this, args);
    },
    show: function() {

        // do custom method stuff

        // call the original method
        this._super('show');
    }
});

// override the old initialization with the new constructor
$.fn.modal = $.extend(function(option) {

    var args = $.makeArray(arguments),
        option = args.shift();

    return this.each(function() {

        var $this = $(this);
        var data = $this.data('modal'),
            options = $.extend({}, _super.defaults, $this.data(), typeof option == 'object' && option);

        if ( !data ) {
            $this.data('modal', (data = new Modal(this, options)));
        }
        if (typeof option == 'string') {
            data[option].apply( data, args );
        }
        else if ( options.show ) {
            data.show.apply( data, args );
        }
    });

}, $.fn.modal);

这样你就可以了

1) 添加您自己的默认选项

1) add your own default options

2) 使用自定义参数创建新方法并访问原始(超级)函数

2) create new methods with custom arguments and access to original (super) functions

3) 在调用原始构造函数之前和/或之后在构造函数中做一些事情

3) do stuff in the constructor before and/or after the original constructor is called

这篇关于如何扩展 Twitter Bootstrap 插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！