Comment Étendre Twitter Bootstrap Plugin

Question

Je suis à creuser de Twitter Bootstrap et maintenant vous voulez essayer d'ajouter certaines fonctionnalités des plugins, mais je ne peux pas comprendre comment le faire. À l'aide de la lightbox plugin comme exemple (http://twitter.github.com/bootstrap/javascript.html#modals), j'aimerais ajouter une nouvelle fonction pour le plugin qui peut être appelé comme l'un serait le niveau plugin méthodes. Le plus proche que je pense que je suis venu, c'est avec le code suivant, mais tout ce que j'obtiens quand j'essaie d'accéder à la fonction ne fait pas partie de l'objet.

Toutes les suggestions? C'est ce que j'ai essayé qui semble être la plus proche de ce que je dois faire:

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

Ensuite, je voudrais l'appeler comme suit:

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

EDIT: OK, j'ai compris comment faire:

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

            // do stuff here
        }
    }

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

Le problème avec l'ensemble existant de Bootstrap plugins est que si quelqu'un veut s'étendre, aucun de ces nouvelles méthodes peuvent accepter des arguments. Ma tentative de "réparer" ce fut pour ajouter l'acceptation des arguments dans les plugins appel de fonction.

$.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

Answer 1

C'est un vieux thread, mais j'ai juste fait quelques extensions personnalisées à modale selon le modèle suivant:

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

De cette façon, vous pouvez

1) ajoutez vos propres options par défaut

2) créer de nouvelles méthodes avec des arguments personnalisés et l'accès à l'original (super) fonctions

3) faire des trucs dans le constructeur avant et/ou après l'original constructeur est appelé

Answer 2

Pour l'enregistrement il y a une méthode simple pour remplacer ou étendre les fonctions existantes:

var _show = $.fn.modal.Constructor.prototype.show;

$.fn.modal.Constructor.prototype.show = function() {
    _show.apply(this, arguments);
    //Do custom stuff here
};

Ne couvre pas des arguments personnalisés, mais il est facile aussi bien avec la méthode ci-dessus; au lieu d'utiliser apply et arguments, de préciser l'origine des arguments plus personnalisé dans la définition de la fonction, puis d'appeler le originale _show (ou celui qu'il est) avec l'original arguments, et enfin faire d'autres choses avec de nouveaux arguments.

Answer 3

Pour référence, j'ai eu un problème similaire, j'ai donc "étendue" de la Typeahead plugin par bifurquer et en ajoutant les fonctionnalités que j'avais besoin dans le plugin script lui-même.

Si vous devez modifier la source ce n'est pas vraiment une extension de toute façon j'ai donc pensé qu'il était plus facile de mettre toutes mes modifications dans un seul endroit.

Answer 4

Pour ceux qui cherchent à le faire avec Bootstrap 3. Le plugin de mise en page a changé un peu les options par défaut pour tous Bootstrap 3 plugins sont attachés à l'plugins constructeur:

var _super = $.fn.modal;
$.extend(_super.Constructor.DEFAULTS, {
       foo: 'bar',
       john: 'doe'
});