update more readme changes - introduce target specificty convention to more plugins

docs/javascript.html

@@ -112,7 +112,7 @@
      <div class="span9">
       <h3>What's included</h3>
        <p>Bring some of Bootstrap's primary components to life with custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. We encourage you to extend and modify them to fit your specific development needs.</p>
-       <table class="striped-table">
+       <table class="bordered-table striped-table">
          <thead>
            <tr>
              <th style="width: 150px;">File</th>
@@ -186,7 +186,7 @@
           <h3>Using bootstrap-modal</h3>
           <pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
           <h3>Options</h3>
-          <table class="striped-table">
+          <table class="bordered-table striped-table">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -208,16 +208,11 @@
                <td>true</td>
                <td>Closes the modal when escape key is pressed</td>
              </tr>
-             <tr>
-               <td>show</td>
-               <td>boolean</td>
-               <td>true</td>
-               <td>Opens modal on class initialization</td>
-             </tr>
             </tbody>
           </table>
           <h3>Markup</h3>
-          <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p>
+          <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p>
+          <p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.</p>
 <pre class="prettyprint linenums">
 &lt;a class="btn" data-toggle="modal" href="#myModal" &gt;Launch Modal&lt;/a&gt;
 </pre>
@@ -240,7 +235,7 @@ $('#myModal').modal({
           <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
           <h3>Events</h3>
           <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
-          <table class="striped-table">
+          <table class="bordered-table striped-table">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -311,12 +306,14 @@ $('#myModal').on('hidden', function () {
           <h3>Using boostrap-dropdown.js</h3>
           <pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre>
           <h3>Markup</h3>
-          <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code>. Any valid bootstrap dropdown will automatically be activated.</p>
+          <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.</p>
+          <p><span class="label notice">Notice</span> For added control and flexibility, optionally specify a <code>data-target="#fat"</code> or <code>href="#fat"</code> - this allows you to target specific dropdowns.</p>
+
 <pre class="prettyprint linenums">
 &lt;ul class="tabs"&gt;
   &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
-  &lt;li class="dropdown"&gt;
-    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown&lt;/a&gt;
+  &lt;li id="secondary" class="dropdown"&gt;
+    &lt;a href="#secondary" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown&lt;/a&gt;
     &lt;ul class="dropdown-menu"&gt;
       &lt;li&gt;&lt;a href="#"&gt;Secondary link&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
@@ -343,7 +340,7 @@ $('#myModal').on('hidden', function () {
                   <input type="text" class="search-query span2" placeholder="Search">
                 </form>
                 <ul class="nav secondary-nav">
-                  <li class="dropdown">
+                  <li id="fat-menu" class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a>
                     <ul class="dropdown-menu">
                       <li><a href="#">Secondary link</a></li>
@@ -352,7 +349,7 @@ $('#myModal').on('hidden', function () {
                       <li><a href="#">Another link</a></li>
                     </ul>
                   </li>
-                  <li class="dropdown">
+                  <li id="mdo-menu" class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a>
                     <ul class="dropdown-menu">
                       <li><a href="#">Secondary link</a></li>
@@ -493,7 +490,7 @@ $('#myModal').on('hidden', function () {
 &lt;/script&gt;</pre>
           </p>
           <h3>Events</h3>
-          <table class="zebra-striped">
+          <table class="bordered-table striped-table">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -571,7 +568,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <h3>Using bootstrap-twipsy.js</h3>
           <pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
           <h3>Options</h3>
-          <table class="striped-table">
+          <table class="bordered-table striped-table">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -661,7 +658,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <h3>Using boostrap-popover.js</h3>
           <pre class="prettyprint linenums">$('#example').popover(options)</pre>
           <h3>Options</h3>
-          <table class="striped-table">
+          <table class="bordered-table striped-table">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -834,7 +831,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
   $('.btn').button('complete')
 &lt;/scrip&gt;</pre>
           <h3>Demo</h3>
-          <table class="striped-table">
+          <table class="bordered-table striped-table">
             <tbody>
              <tr>
                <td>Stateful</td>
@@ -903,7 +900,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <h3>Using bootstrap-collapse.js</h3>
           <pre class="prettyprint linenums">$(".collapse").collapse()</pre>
           <h3>Options</h3>
-          <table class="striped-table">
+          <table class="bordered-table striped-table">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -953,7 +950,7 @@ $('#myCollapsible').collapse({
           <p>
             Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
           </p>
-          <table class="striped-table">
+          <table class="bordered-table striped-table">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>

js/README.md

@@ -1,5 +1,5 @@
 ## 2.0 BOOTSTRAP JS PHILOSOPHY
-These are the high-level design rules which guide the development of Bootstrap's JS plugins.
+These are the high-level design rules which guide the development of Bootstrap's plugin apis.
 
 ---
 
@@ -28,10 +28,12 @@ All public APIs should be single, chainable methods, and return the collection a
 All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior:
 
     $("#myModal").modal() // initialized with defaults
+    $("#myModal").modal({ keyboard: false }) // initialized with now keyboard
+    $("#myModal").modal('show') // initializes and invokes show immediately afterqwe2
 
 ---
 
-### PLUGIN OPTIONS
+### OPTIONS
 
 Options should be sparse and add universal value. We should pick the right defaults.
 
@@ -51,7 +53,7 @@ examples:
 
 ---
 
-### PLUGIN EVENTS
+### EVENTS
 
 All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the past participle on completion of the action.
 
@@ -60,14 +62,30 @@ All events should have an infinitive and past participle form. The infinitive is
 
 ---
 
+### CONSTRUCTORS
+
+Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way:
+
+
+    $.fn.popover.Constructor
+
+---
+
+### DATA ACCESSOR
+
+Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data api like this:
+
+    $('[rel=popover]').data('popover') instanceof $.fn.popover.Constructor
+
+---
 
 ### DATA ATTRIBUTES
 
 Data attributes should take the following form:
 
 - data-*(verb)* - defines main interaction
-- data-target || href^=# - defined on controller element (if element interacts with an element other than self)
-- data-*(noun)* - defines options for element invocation
+- data-target || href^=# - defined on "control" element (if element controls an element other than self)
+- data-*(noun)* - defines class instance options
 
 examples:
 

js/bootstrap-alert.js

@@ -35,18 +35,22 @@
     constructor: Alert
 
   , close: function ( e ) {
-      var $element = $(this)
+      var $this = $(this)
+        , selector = $this.attr('data-target') || $this.attr('href')
+        , $parent = $(selector)
 
-      $element = $element.hasClass('alert-message') ? $element : $element.parent()
       e && e.preventDefault()
-      $element.removeClass('in')
+
+      $parent.length || ($parent = $this.hasClass('alert-message') ? $this : $this.parent())
+
+      $parent.removeClass('in')
 
       function removeElement() {
-        $element.remove()
+        $parent.remove()
       }
 
-      $.support.transition && $element.hasClass('fade') ?
-        $element.on($.support.transition.end, removeElement) :
+      $.support.transition && $parent.hasClass('fade') ?
+        $parent.on($.support.transition.end, removeElement) :
         removeElement()
     }
 
@@ -65,7 +69,7 @@
     })
   }
 
-  $.fn.alert.Alert = Alert
+  $.fn.alert.Constructor = Alert
 
 
  /* ALERT DATA-API

js/bootstrap-button.js

@@ -83,7 +83,7 @@
     loadingText: 'loading...'
   }
 
-  $.fn.button.Button = Button
+  $.fn.button.Constructor = Button
 
 
  /* BUTTON DATA-API

js/bootstrap-carousel.js

@@ -46,6 +46,6 @@
     })
   }
 
-  $.fn.carousel.Carousel = Carousel
+  $.fn.carousel.Constructor = Carousel
 
 }( window.jQuery )

js/bootstrap-collapse.js

@@ -116,7 +116,7 @@
     toggle: true
   }
 
-  $.fn.collapse.Collapse = Collapse
+  $.fn.collapse.Constructor = Collapse
 
 
  /* COLLAPSIBLE DATA-API

js/bootstrap-dropdown.js

@@ -35,11 +35,15 @@
     constructor: Dropdown
 
   , toggle: function ( e ) {
-      var li = $(this).parent('li')
-        , isActive = li.hasClass('open')
+      var $this = $(this)
+        , selector = $this.attr('data-target') || $this.attr('href')
+        , $parent = $(selector)
+
+      $parent.length || ($parent = $this.parent())
 
       clearMenus()
-      !isActive && li.toggleClass('open')
+
+      !$parent.hasClass('open') && $parent.toggleClass('open')
 
       return false
     }
@@ -47,7 +51,7 @@
   }
 
   function clearMenus() {
-    $(toggle).parent('li').removeClass('open')
+    $(toggle).parent().removeClass('open')
   }
 
 
@@ -63,6 +67,8 @@
     })
   }
 
+  $.fn.dropdown.Constructor = Dropdown
+
 
   /* APPLY TO STANDARD DROPDOWN ELEMENTS
    * =================================== */

js/bootstrap-modal.js

@@ -175,17 +175,16 @@
         , options = typeof option == 'object' && option
       if (!data) $this.data('modal', (data = new Modal(this, options)))
       if (typeof option == 'string') data[option]()
-      else if (data.options.show) data.show()
+      else data.show()
     })
   }
 
   $.fn.modal.defaults = {
       backdrop: true
     , keyboard: true
-    , show: true
   }
 
-  $.fn.modal.Modal = Modal
+  $.fn.modal.Constructor = Modal
 
 
  /* MODAL DATA-API
@@ -194,10 +193,11 @@
   $(function () {
     $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
       var $this = $(this)
-        , target = $this.attr('data-target') || $this.attr('href')
-        , option = $(target).data('modal') ? 'toggle' : $this.data()
+        , $target = $($this.attr('data-target') || $this.attr('href'))
+        , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())
+
       e.preventDefault()
-      $(target).modal(option)
+      $target.modal(option)
     })
   })
 

js/bootstrap-popover.js

@@ -29,7 +29,7 @@
   /* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js
      ========================================= */
 
-  Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, {
+  Popover.prototype = $.extend({}, $.fn.twipsy.Constructor.prototype, {
 
     constructor: Popover
 
@@ -84,7 +84,7 @@
     })
   }
 
-  $.fn.popover.Popover = Popover
+  $.fn.popover.Constructor = Popover
 
   $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, {
     placement: 'right'

js/bootstrap-scrollspy.js

@@ -103,7 +103,7 @@
     })
   }
 
-  $.fn.scrollspy.ScrollSpy = ScrollSpy
+  $.fn.scrollspy.Constructor = ScrollSpy
 
 
  /* SCROLLSPY DATA-API

js/bootstrap-tab.js

@@ -107,7 +107,7 @@
     })
   }
 
-  $.fn.tab.Tab = Tab
+  $.fn.tab.Constructor = Tab
 
 
  /* TAB DATA-API

js/bootstrap-twipsy.js

@@ -247,7 +247,7 @@
     })
   }
 
-  $.fn.twipsy.Twipsy = Twipsy
+  $.fn.twipsy.Constructor = Twipsy
 
   $.fn.twipsy.defaults = {
     animate: true