Our Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.
+Our Modal plugin is a super slim take on the traditional modal js plugin, taking special care to include only the bare functionality that we require here at twitter.
Download$('#modal-content').modal(options)
+ $('#my-modal').modal(options)
boolean) - if true, it will include a modal-backdrop element.boolean) - if true, it will close the modal when escape key is pressed.Activates your content as a modal. Accepts an optional options object. If you want your modal to fade in and out, just add a .fade class to your .modal element (refer to the demo to see this in action).
| Name | +type | +default | +description | +
|---|---|---|---|
| backdrop | +boolean | +false | +Includes a modal-backdrop element | +
| keyboard | +boolean | +false | +Closes the modal when escape key is pressed | +
| show | +boolean | +false | +Opens modal on class initialization | +
You can activate modals on your page easily without having to write a single line of javascript. Just give an element a data-controls-modal which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes as well.
-$('#modal-content').modal({
+<a class="btn" data-controls-modal="my-modal" data-backdrop="true" >Launch Modal</a>
+
+ Notice If you want your modal to animate in and out, just add a .fade class to your .modal element (refer to the demo to see this in action).
Activates your content as a modal. Accepts an optional options object.
+
+$('#my-modal').modal({
closeOnEscape: true
})
+ Manually toggles a modal.
+$('#my-modal').modal('toggle')
+ Manually opens a modal.
+$('#my-modal').modal('show')
+ Manually hides a modal.
+$('#my-modal').modal('hide')
+ Returns a modals modal class instance.
+$('#my-modal').modal('hide')
+ Notice Alternatively, this can be retrieved with $().data('modal').
Bootstraps modal class makes use of custom events. You can use trigger to make things happen manually or bind to listen for things happening.
Toggle the modal open state.
-$('#modal-content').trigger('modal:toggle')
- Opens the modal.
-$('#modal-content').trigger('modal:show')
- Closes the modal.
-$('#modal-content').trigger('modal:hide')
- Fired when the modal has been made visible.
-
-$('#modal-content')
- .bind('modal:shown', function () {
- // do something here...
- })
- Fired when the modal has become hidden
+Bootstrap's modal class exposes a few events for hooking into modal functionality. The include:
+ + + +| Name | +Description | +
|---|---|
| show | +This event fires immediately when the show instance method is called. |
+
| shown | +This event is fired when the modal has been made visible to the user (will wait for css transitions to complete). | +
| hide | +This event is fired immediately when the hide instance method has been called. |
+
| hidden | +This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete). | +
-$('#modal-content')
- .bind('modal:hidden', function () {
- $(this).remove() // cleanup jQuery plugin data on hide
- })
+$('#my-modal').bind('hidden', function () {
+ // do something ...
+})
$('#topbar').dropdown()
- To quickly add dropdown functionality to any nav element, use the data-dropdown attribute. Any valid bootstrap dropdown will automatically be activated.
+<ul class="tabs"> + <li class="active"><a href="#">Home</a></li> + <li class="dropdown" data-dropdown> + <a href="#" class="dropdown-toggle">Dropdown</a> + <ul class="dropdown-menu"> + <li><a href="#">Secondary link</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Another link</a></li> + </ul> + </li> +</ul>+
Notice If your ui has several dropdowns, consider adding the data-dropdown attribute to a more significant container element like .tabs or .topbar.
+
- Activates menus for given topbar or tabbed navigation. + A programatic api for activating menus for a given topbar or tabbed navigation.
$('#topbar').dropdown()
- To easily add scrollspy behavior to your nav, just add the data-scrollspy attribute to the .topbar.
+
<div class="topbar" data-scrollspy >...</div>+
Auto activates navigation buttons by users scroll position.
$('body > .topbar').scrollSpy()
-
- Note: Topbar anchor tags must have resolvable id targets like <a href="#home">home</a>.
+
Notice Topbar anchor tags must have resolvable id targets. For example, a <a href="#home">home</a> might correspond to a <div id="home"></div>.
The scrollspy caches nav buttons and anchor locations. If you need to update the cache (because you have dynamic content) just trigger the scrollspy:refresh event.
$('body > .topbar').trigger('scrollspy:refresh')
+ The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body like below.
+$('body').scrollspy('refresh')
Peep the topbar navigation homie!
- +Look at the topbar navigation on this page.
$('.tabs').tabs()
- You can activate a tab or pill navigation without writing any javascript by simply giving them a data-tabs or data-pills attribute.
<ul class="tabs" data-tabs >...</ul>+
Activates tab and pill functionality for a given container. Tab links should reference id's in the document. @@ -301,15 +359,8 @@ $('#modal-content') <div id="settings">...</div> </ul>
-note: To manually activate a tab just fire a click event on one of the tabs.
-$('.tabs a[href="#messages"]').click()
$('#example').twipsy(options)
boolean) - apply a css fade transition to the tooltip.number) - delay before showing tooltip (ms).number) - delay before hiding tooltip (ms).string) - fallback text to use when no tooltip text.string) - position of tooltip - above | below | left | right.boolean) - is tooltip content HTML?boolean) - use live event support?number) - pixel offset of tooltip from element.string|function) - attribute/callback containing tooltip text.string) - how tooltip is triggered - hover | focus | manual.| Name | +type | +default | +description | +
|---|---|---|---|
| animate | +boolean | +true | +apply a css fade transition to the tooltip | +
| delayIn | +number | +0 | +delay before showing tooltip (ms) | +
| delayOut | +number | +0 | +delay before hiding tooltip (ms) | +
| fallback | +string | +'' | +text to use when no tooltip title is present | +
| placement | +string | +'above' | +how to position the tooltip - above | below | left | right | +
| html | +boolean | +false | +allows html content within tooltip | +
| live | +boolean | +false | +use event delegation instead of individual event handlers | +
| offset | +number | +0 | +pixel offset of tooltip from target element | +
| title | +string | function | +'' | +attribute or method for retrieving title text | +
| trigger | +string | +'hover' | +how tooltip is triggered - hover | focus | manual | +
Attaches a twipsy handler to an element collection.
diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index 8be8f13c06..a50571349f 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -20,22 +20,23 @@ (function( $ ){ - var selector = 'a.menu, .dropdown-toggle' + var d = 'a.menu, .dropdown-toggle' function clearMenus() { - $(selector).parent('li').removeClass('open') + $(d).parent('li').removeClass('open') } $(function () { - $('body').bind("click", clearMenus) + $('html').bind("click", clearMenus) + $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' ) }) /* DROPDOWN PLUGIN DEFINITION * ========================== */ - $.fn.dropdown = function ( options ) { + $.fn.dropdown = function ( selector ) { return this.each(function () { - $(this).delegate(selector, 'click', function (e) { + $(this).delegate(selector || d, 'click', function (e) { var li = $(this).parent('li') , isActive = li.hasClass('open') diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 8b21c192d1..97eeded512 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -54,72 +54,73 @@ var Modal = function ( content, options ) { this.settings = $.extend({}, $.fn.modal.defaults) + this.$element = $(content) + .delegate('.close', 'click.modal', $.proxy(this.hide, this)) if ( options ) { $.extend( this.settings, options ) - } - this.$element = $(content) - .bind('modal:show', $.proxy(this.show, this)) - .bind('modal:hide', $.proxy(this.hide, this)) - .bind('modal:toggle', $.proxy(this.toggle, this)) - .delegate('.close', 'click', $.proxy(this.hide, this)) + if ( options.show ) { + this.show() + } + } return this } Modal.prototype = { - toggle: function () { - return this[!this.isShown ? 'show' : 'hide']() - } - - , show: function () { - var that = this - this.isShown = true - - _.escape.call(this) - - _.backdrop.call(this, function () { - that.$element - .appendTo(document.body) - .show() - - setTimeout(function () { - that.$element - .addClass('in') - .trigger('modal:shown') - }, 1) - }) - - return this - } - - , hide: function (e) { - e && e.preventDefault() - - var that = this - - this.isShown = false - - _.escape.call(this) - - this.$element.removeClass('in') - - function removeElement () { - that.$element - .detach() - .trigger('modal:hidden') - - _.backdrop.call(that) + toggle: function () { + return this[!this.isShown ? 'show' : 'hide']() } - $.support.transition && this.$element.hasClass('fade') ? - this.$element.one(transitionEnd, removeElement) : - removeElement() + , show: function () { + var that = this + this.isShown = true + this.$element.trigger('show') - return this - } + escape.call(this) + backdrop.call(this, function () { + that.$element + .appendTo(document.body) + .show() + + setTimeout(function () { + that.$element + .addClass('in') + .trigger('shown') + }, 1) + }) + + return this + } + + , hide: function (e) { + e && e.preventDefault() + + var that = this + this.isShown = false + + escape.call(this) + + this.$element + .trigger('hide') + .removeClass('in') + + function removeElement () { + that.$element + .hide() + .trigger('hidden') + + backdrop.call(that) + } + + $.support.transition && this.$element.hasClass('fade') ? + this.$element.one(transitionEnd, removeElement) : + removeElement() + + return this + } } @@ -127,51 +128,47 @@ /* MODAL PRIVATE METHODS * ===================== */ - var _ = { + function backdrop ( callback ) { + var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' + if ( this.isShown && this.settings.backdrop ) { + this.$backdrop = $('') + .click($.proxy(this.hide, this)) + .appendTo(document.body) - backdrop: function ( callback ) { - var that = this - , animate = this.$element.hasClass('fade') ? 'fade' : '' - if ( this.isShown && this.settings.backdrop ) { - this.$backdrop = $('') - .click($.proxy(this.hide, this)) - .appendTo(document.body) + setTimeout(function () { + that.$backdrop && that.$backdrop.addClass('in') + $.support.transition && that.$backdrop.hasClass('fade') ? + that.$backdrop.one(transitionEnd, callback) : + callback() + }) + } else if ( !this.isShown && this.$backdrop ) { + this.$backdrop.removeClass('in') - setTimeout(function () { - that.$backdrop && that.$backdrop.addClass('in') - $.support.transition && that.$backdrop.hasClass('fade') ? - that.$backdrop.one(transitionEnd, callback) : - callback() - }) - } else if ( !this.isShown && this.$backdrop ) { - this.$backdrop.removeClass('in') + function removeElement() { + that.$backdrop.remove() + that.$backdrop = null + } - function removeElement() { - that.$backdrop.remove() - that.$backdrop = null + $.support.transition && this.$element.hasClass('fade')? + this.$backdrop.one(transitionEnd, removeElement) : + removeElement() + } else if ( callback ) { + callback() + } + } + + function escape() { + var that = this + if ( this.isShown && this.settings.keyboard ) { + $('body').bind('keyup.modal', function ( e ) { + if ( e.which == 27 ) { + that.hide() } - - $.support.transition && this.$element.hasClass('fade')? - this.$backdrop.one(transitionEnd, removeElement) : - removeElement() - } else { - callback() - } + }) + } else if ( !this.isShown ) { + $('body').unbind('keyup.modal') } - - , escape: function () { - var that = this - if ( this.isShown && this.settings.closeOnEscape ) { - $('body').bind('keyup.modal.escape', function ( e ) { - if ( e.which == 27 ) { - that.hide() - } - }) - } else if ( !this.isShown ) { - $('body').unbind('keyup.modal.escape') - } - } - } @@ -179,17 +176,52 @@ * ======================= */ $.fn.modal = function ( options ) { - options = options || {} - return this.each(function () { - return new Modal(this, options) - }) + var modal = this.data('modal') + + if (!modal) { + + if (typeof options == 'string') { + options = { + show: /show|toggle/.test(options) + } + } + + return this.each(function () { + $(this).data('modal', new Modal(this, options)) + }) + } + + if ( options === true ) { + return modal + } + + if ( typeof options == 'string' ) { + modal[options]() + } else if ( modal ) { + modal.toggle() + } + + return this } $.fn.modal.Modal = Modal $.fn.modal.defaults = { backdrop: false - , hideOnEscape: false + , keyboard: false + , show: true } + + /* MODAL DATA- IMPLEMENTATION + * ========================== */ + + $(function () { + $('body').delegate('[data-controls-modal]', 'click', function (e) { + e.preventDefault() + var $this = $(this).data('show', true) + $('#' + $this.attr('data-controls-modal')).modal( $this.data() ) + }) + }) + })( jQuery || ender ) \ No newline at end of file diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index 2cf487c50f..84e64c6eaa 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -22,21 +22,20 @@ var $window = $(window) - function ScrollSpy( topbar ) { + function ScrollSpy( topbar, selector ) { var processScroll = $.proxy(this.processScroll, this) this.$topbar = $(topbar) - this.setup() - this.$topbar - .delegate('li > a', 'click', processScroll) - .bind('topbar:refresh', $.proxy(this.setup, this)) + this.selector = selector || 'li > a' + this.refresh() + this.$topbar.delegate(this.selector, 'click', processScroll) $window.scroll(processScroll) this.processScroll() } ScrollSpy.prototype = { - setup: function () { - this.targets = this.$topbar.find('li > a').map(function () { + refresh: function () { + this.targets = this.$topbar.find(this.selector).map(function () { var href = $(this).attr('href') return /^#\w/.test(href) && $(href).length ? href : null }) @@ -65,11 +64,11 @@ this.activeTarget = target this.$topbar - .find('.active') + .find(this.selector).parent('.active') .removeClass('active') this.$topbar - .find('a[href=' + target + ']') + .find(this.selector + '[href="' + target + '"]') .parent('li') .addClass('active') } @@ -79,10 +78,28 @@ /* SCROLLSPY PLUGIN DEFINITION * =========================== */ - $.fn.scrollSpy = function() { - return this.each(function () { - new ScrollSpy(this) - }) + $.fn.scrollSpy = function( options ) { + var scrollspy = this.data('scrollspy') + + if (!scrollspy) { + return this.each(function () { + $(this).data('scrollspy', new ScrollSpy( this, options )) + }) + } + + if ( options === true ) { + return scrollspy + } + + if ( typeof options == 'string' ) { + scrollspy[options]() + } + + return this } + $(function () { + $('body').scrollSpy('[data-scrollspy] li > a') + }) + }( jQuery || ender ) \ No newline at end of file diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js index aaa73644df..c93bd745fd 100644 --- a/js/bootstrap-tabs.js +++ b/js/bootstrap-tabs.js @@ -49,10 +49,14 @@ /* TABS/PILLS PLUGIN DEFINITION * ============================ */ - $.fn.tabs = $.fn.pills = function () { + $.fn.tabs = $.fn.pills = function ( selector ) { return this.each(function () { - $(this).delegate('.tabs > li > a, .pills > li > a, .dropdown-menu > li > a', 'click', tab) + $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab) }) } + $(function () { + $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a') + }) + })( jQuery || ender ) \ No newline at end of file