From 173be3f1e87a83f8e85bef8ddb979a921ccee9d1 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 11 Sep 2011 20:08:43 -0700 Subject: [PATCH] change hella js... broke all the tests. i <3 wip --- docs/assets/js/application.js | 6 - docs/index.html | 2 +- docs/javascript.html | 295 +++++++++++++++++++++++----------- js/bootstrap-dropdown.js | 11 +- js/bootstrap-modal.js | 228 +++++++++++++++----------- js/bootstrap-scrollspy.js | 43 +++-- js/bootstrap-tabs.js | 8 +- 7 files changed, 376 insertions(+), 217 deletions(-) diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index e39a754749..57d20b3f86 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -1,11 +1,5 @@ $(document).ready(function(){ - // Dropdown example for topbar nav - // =============================== - - $('body').dropdown() // catch any dropdowns on the page - - // Scrollspy // ========= diff --git a/docs/index.html b/docs/index.html index 9faf2feb65..2a9d380bce 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1233,7 +1233,7 @@

Fixed topbar

-
+

Project Name

diff --git a/docs/javascript.html b/docs/javascript.html index b830e7d64f..e18784b911 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -39,7 +39,7 @@ -
+

Bootstrap JS

@@ -82,49 +82,110 @@
-

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

Using bootstrap-modal

- 
$('#modal-content').modal(options)
+ 
$('#my-modal').modal(options)

Options

-
    -
  • backdrop (boolean) - if true, it will include a modal-backdrop element.
    • -
  • closeOnEscape (boolean) - if true, it will close the modal when escape key is pressed.
    • -
-

Methods

-

$().modal

-

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nametypedefaultdescription
backdropbooleanfalseIncludes a modal-backdrop element
keyboardbooleanfalseCloses the modal when escape key is pressed
showbooleanfalseOpens modal on class initialization
+

Markup

+

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

+

Methods

+

.modal(options)

+

Activates your content as a modal. Accepts an optional options object. +

+$('#my-modal').modal({
   closeOnEscape: true
 })
+

.modal('toggle')

+

Manually toggles a modal.

+ 
$('#my-modal').modal('toggle')
+

.modal('show')

+

Manually opens a modal.

+ 
$('#my-modal').modal('show')
+

.modal('hide')

+

Manually hides a modal.

+ 
$('#my-modal').modal('hide')
+

.modal(true)

+

Returns a modals modal class instance.

+ 
$('#my-modal').modal('hide')
+

Notice Alternatively, this can be retrieved with $().data('modal').

Events

-

Bootstraps modal class makes use of custom events. You can use trigger to make things happen manually or bind to listen for things happening.

-

modal:toggle

-

Toggle the modal open state.

- 
$('#modal-content').trigger('modal:toggle')
-

modal:show

-

Opens the modal.

- 
$('#modal-content').trigger('modal:show')
-

modal:hide

-

Closes the modal.

- 
$('#modal-content').trigger('modal:hide')
-

modal:shown

-

Fired when the modal has been made visible.

- 
-$('#modal-content')
-  .bind('modal:shown', function () {
-    // do something here...
-  })
-

modal:hidden

-

Fired when the modal has become hidden

+

Bootstrap's modal class exposes a few events for hooking into modal functionality. The include:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
showThis event fires immediately when the show instance method is called.
shownThis event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hideThis event is fired immediately when the hide instance method has been called.
hiddenThis 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 ... +})

Demo

- - - +
@@ -178,19 +224,30 @@ $('#modal-content')

Using boostrap-dropdown.js

$('#topbar').dropdown()
-

Method

-

$().dropdown

+

Markup

+

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

Methods

+

$().dropdown()

- Activates menus for given topbar or tabbed navigation. + A programatic api for activating menus for a given topbar or tabbed navigation.

Demo

-
-
+

Project Name

@@ -244,24 +301,22 @@ $('#modal-content')

Using boostrap-scrollspy.js

$('#topbar').dropdown()
-

Method

-

$().scrollspy

+

Markup

+

To easily add scrollspy behavior to your nav, just add the data-scrollspy attribute to the .topbar. + 

<div class="topbar" data-scrollspy >...</div>
+

Methods

+

$().scrollspy()

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

-

Events

-

scrollspy:refresh

-

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')
+

.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')

Demo

-

Peep the topbar navigation homie!

- +

Look at the topbar navigation on this page.

@@ -281,7 +336,10 @@ $('#modal-content')

Using boostrap-tabs.js

$('.tabs').tabs()
-

Method

+

Markup

+

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>
+

Methods

$().tabs or $().pills

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()

Demo

- -
    +
    • Home
    • Profile
    • Messages
      • @@ -349,18 +400,78 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita

      Using bootstrap-twipsy.js

      $('#example').twipsy(options)

      Options

      -
        -
      • animate (boolean) - apply a css fade transition to the tooltip.
        • -
      • delayIn (number) - delay before showing tooltip (ms).
        • -
      • delayOut (number) - delay before hiding tooltip (ms).
        • -
      • fallback (string) - fallback text to use when no tooltip text.
        • -
      • placement (string) - position of tooltip - above | below | left | right.
        • -
      • html (boolean) - is tooltip content HTML?
        • -
      • live (boolean) - use live event support?
        • -
      • offset (number) - pixel offset of tooltip from element.
        • -
      • title (string|function) - attribute/callback containing tooltip text.
        • -
      • trigger (string) - how tooltip is triggered - hover | focus | manual.
        • -
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Nametypedefaultdescription
      animatebooleantrueapply a css fade transition to the tooltip
      delayInnumber0delay before showing tooltip (ms)
      delayOutnumber0delay before hiding tooltip (ms)
      fallbackstring''text to use when no tooltip title is present
      placementstring'above'how to position the tooltip - above | below | left | right
      htmlbooleanfalseallows html content within tooltip
      livebooleanfalseuse event delegation instead of individual event handlers
      offsetnumber0pixel offset of tooltip from target element
      titlestring | function''attribute or method for retrieving title text
      triggerstring'hover'how tooltip is triggered - hover | focus | manual

      Methods

      $().twipsy

      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