How to Extend Twitter Bootstrap Download Module

Question

I dig into Bootstrap on Twitter and now I want to try adding some features to the plugins, but I cannot figure out how to do this. Using the modal plugin as an example ( http://twitter.github.com/bootstrap/javascript.html#modals ), I would like to add a new function to the plugin that can be called, like the standard plugin methods. The closest I think is I came up 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 tried, which seems to be closest to what I need to do:

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

Then I would like to call it as follows:

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

EDIT: 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); 

The problem with the existing set of Bootstrap plugins is that if someone wants to extend them, none of the new methods can accept arguments. My attempt to “fix” this was to add the reception of arguments to the plugin 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 

Answer 1

This is an old thread, but I just made some custom extensions for 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); 

That way you can

1) add your own default options

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

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

Answer 2

There is a simple way to override or extend existing functions for writing:

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

Does not apply to user arguments, but it is as easy as described above; instead of using apply and arguments specify the original arguments plus the custom ones in the function definition, then call the original _show (or whatever it is) with the original arguments, and finally do other things with the new arguments.

Answer 3

For reference, I had a similar problem, so I "extended" the Typeahead plugin by marking up and adding the functionality I needed in the script plugin myself.

If you need to change the source, this is not really an extension, so I decided it was easier to just make all my changes in one place.

Answer 4

For those who want to do this with Bootstrap 3. The plugin plugin has slightly changed the default settings for all Bootstrap 3 plugins connected to the plugin constructor:

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

Answer 5

+1 for the accepted answer above from David. But if I could simplify it a bit, I would adjust the DEFAULTS and $fn.modal as shown below:

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