How does Bootstrap namespace its JavaScript components?

Question

Is there a global object that Bootstrap creates when initializing one of its components, e.g. Tabs? How does it work?

Using Bootstrap 3.2.

$.fn.tabs = ... Is that the answer to your question?

idmean
– idmean

2014-08-23 20:01:18 +00:00
Commented Aug 23, 2014 at 20:01 — idmean
– idmean, Commented Aug 23, 2014 at 20:01

idmean · Accepted Answer · 2014-08-23 20:05:19Z

First they define

var Tab = function (element) { this.element = $(element) }

Then they go further and prototype Tab:

Tab.prototype.activate = function (element, container, callback) { var $active = container.find('> .active') var transition = callback //... }

And finally they add Tab as a jQuery method using their Plugin factory:

function Plugin(option) { return this.each(function () { var $this = $(this) var data = $this.data('bs.tab') if (!data) $this.data('bs.tab', (data = new Tab(this))) if (typeof option == 'string') data[option]() }) } $.fn.tab = Plugin $.fn.tab.Constructor = Tab

Plugin seems to be something like the jQuery UI Plugin Factory, so you call $("#a").tab("method") and the Plugin object will call the corresponding method on a Tab object.

Ahh... when I was on their page I was able to type "Plugin" into the console and see that it was a function, but the only thing that appeared in Object.keys(Plugin) was a toSTring function. I should have seen the $.fn.tab and Plugin.call($(this), 'show'); !
@user1809836 No, you shouldn't. It's the factory pattern. Plugin is used to insatiate the object that really handles the calls to the jQuery plugin, it's a bit like a bridge. It's similar to this: learn.jquery.com/jquery-ui/widget-factory

Collectives™ on Stack Overflow

How does Bootstrap namespace its JavaScript components?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related