Come estendere il plugin di bootstrap di Twitter

Question

Sto scavando nel Bootstrap di Twitter e ora voglio provare ad aggiungere qualche funzionalità ai plugin, ma non riesco a capire come farlo. Usando il plugin modale come esempio(), vorrei aggiungere una nuova funzione al plug-in che può essere chiamata come uno dei metodi standard del plugin. Il più vicino credo di essere venuto è con il seguente codice, ma tutto quello che ottengo quando cerco di accedere è che la funzione non fa parte dell'oggetto.

Qualche suggerimento? Questo è quello che ho cercato che sembra essere più vicino a quello che devo fare:

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

Poi vorrei chiamarlo come segue:

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

EDIT: OK, ho capito come fare questo:

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

      // do stuff here 
     } 
    } 

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

il problema con l'attuale serie di plugin Bootstrap è che se qualcuno vuole estendere loro, nessuno dei nuovi metodi può accettare argomenti. Il mio tentativo di "risolvere" questo è stato quello di aggiungere l'accettazione degli argomenti nella chiamata di funzione dei plugin.

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

Questo è un vecchio thread, ma ho appena fatto alcune estensioni personalizzate per modali utilizzando il seguente schema:

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

questo modo è possibile

1) aggiungere le opzioni di default

2) creare nuovi metodi con argomenti personalizzati e accedere a funzioni (super) originali

3) fare cose nel costruttore prima e/o dopo il const originale ructor si chiama

Answer 2

Per avere un riferimento, ho avuto un problema simile in modo da "extended" the Typeahead plugin fork e aggiungendo la funzionalità di cui avevo bisogno nello script plugin stesso.

Se si deve cambiare la fonte, in ogni caso non è un'estensione, quindi ho pensato che fosse più semplice mettere tutte le mie modifiche in un unico posto.

Answer 3

Per la cronaca c'è un metodo semplice per sostituire o estendere le funzioni esistenti:

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

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

Non copre argomenti personalizzati, ma è facile anche con il metodo di cui sopra; invece di usare apply e arguments, specificare gli argomenti originali più quelli personalizzati nella definizione della funzione, quindi chiamare l'originale _show (o qualunque esso sia) con gli argomenti originali e infine fare altre cose con i nuovi argomenti.

Answer 4

Per coloro che cercano di fare questo con Bootstrap 3. La disposizione plug-in è cambiato un po 'le opzioni predefinite per tutti Bootstrap 3 plugin sono attaccati al plugin costruttore:

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

Answer 5

+1 per la risposta accettata sopra da David.Ma se potessi semplificare un po 'di più, mi piacerebbe regolare la DEFAULTS estendere e $fn.modal estendendo in questo modo:

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