jquery - ejemplos - Cómo extender el complemento de Twitter Bootstrap

tooltip bootstrap 4 example

Question

Estoy investigando en Bootstrap de Twitter y ahora quiero probar y agregar alguna funcionalidad a los complementos, pero no puedo encontrar la manera de hacerlo. Usando el plugin modal como ejemplo ( http://twitter.github.com/bootstrap/javascript.html#modals ), me gustaría agregar una nueva función al plugin que se pueda llamar como lo haría con los métodos de plugin estándar . Lo más cerca que creo que he venido es con el siguiente código, pero lo único que obtengo cuando intento acceder es que la función no es parte del objeto.

¿Alguna sugerencia? Esto es lo que he intentado que parece ser lo más cercano a lo que debo hacer:

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

Entonces me gustaría llamarlo de la siguiente manera:

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

EDITAR: OK, descubrí cómo hacer esto:

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

            // do stuff here
        }
    }

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

El problema con el conjunto existente de complementos de Bootstrap es que si alguien quiere extenderlos, ninguno de los nuevos métodos puede aceptar argumentos. Mi intento de "arreglar" esto fue agregar la aceptación de argumentos en la llamada a la función de complementos.

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

+1 por la respuesta aceptada arriba de David. Pero si pudiera simplificarlo un poco más, ajustaría los DEFAULTS extendiéndose y $fn.modal extendiéndose así:

!function($) {

    ''use strict'';

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

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

        // do custom constructor stuff here

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

    }

    // add custom defaults
    Modal.DEFAULTS = $.extend( _super.defaults, {
         myCustomOption: true
    });

    // 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'');
        },
        myCustomMethod: function() {
            alert(''new feature!'');
        }
    });

    // Copied exactly from Bootstrap 3 (as of Modal.VERSION  = ''3.3.5'')
    // Notice: You can copy & paste it exactly, no differences!
    function Plugin(option, _relatedTarget) {
        return this.each(function () {
            var $this   = $(this)
            var data    = $this.data(''bs.modal'')
            var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == ''object'' && option)

            if (!data) $this.data(''bs.modal'', (data = new Modal(this, options)))
            if (typeof option == ''string'') data[option](_relatedTarget)
            else if (options.show) data.show(_relatedTarget)
        })
    }

    // override the old initialization with the new constructor
    $.fn.modal = $.extend(Plugin, $.fn.modal);

}(jQuery);

Answer 2

Como referencia, tuve un problema similar, así que "extendí" el plugin de Typeahead bifurcando y agregando la funcionalidad que necesitaba en el script del plugin.

Si tiene que cambiar la fuente, en realidad no es una extensión así que pensé que era más fácil poner todas mis modificaciones en un solo lugar.

Answer 3

Este es un hilo viejo, pero acabo de hacer algunas extensiones personalizadas para modal usando el siguiente patrón:

// 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 esta manera puedes

1) agrega tus propias opciones predeterminadas

2) crear nuevos métodos con argumentos personalizados y acceso a funciones (super) originales

3) hacer cosas en el constructor antes y / o después de que se llame al constructor original

Answer 4

Para cualquiera que quiera hacer esto con Bootstrap 3. El diseño del complemento ha cambiado un poco, las opciones predeterminadas para todos los complementos de Bootstrap 3 están asociadas al constructor de complementos:

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

Answer 5

Para el registro, hay un método simple para anular o ampliar las funciones existentes:

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

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

No cubre argumentos personalizados, pero también es fácil con el método anterior; en lugar de usar apply y arguments , especifique los argumentos originales más los personalizados en la definición de la función, luego llame al _show original (o lo que sea) con los argumentos originales, y finalmente haga otras cosas con los nuevos argumentos.