change event to use target and relatedTarget (which more closely resembles actual...

diff --git a/docs/javascript.html b/docs/javascript.html
index 1f5ad1a38fe391c5edd862940510fba23b79e57d..956dfd0a830578e0621f0c52d711f63ee686ae98 100644 (file)
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -368,14 +368,15 @@ $('#my-modal').bind('hidden', function () {
                                          <tbody>
                                           <tr>
                                             <td>change</td>
-                                            <td>This event fires on tab change. The event provides an additional parameter which holds the id of the previous tab and the id of the new current tab. This information is stored in an object with two properties called from and to, e.g. <code>{ to: '#home', from: '#profile' }</code>.</td>
+                                            <td>This event fires on tab change. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab respectively.</td>
                                           </tr>
                                          </tbody>
                                        </table>
 
                                        <pre class="prettyprint linenums">
-$('#.tabs').bind('changed', function (e, c) {
-  // do something with c.from and c.to ...
+$('#.tabs').bind('change', function (e) {
+  e.target // activated tab
+  e.relatedTarget // previous tab
 })</pre>
           <h3>Demo</h3>
           <ul class="tabs" data-tabs="tabs" >

diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js
index 938a54cc04b39deecfc39520bc8860825eba55aa..e0286a364abf03e1e1547897db5661774b66bf41 100644 (file)
--- a/js/bootstrap-tabs.js
+++ b/js/bootstrap-tabs.js
@@ -27,10 +27,9 @@
 
   function tab( e ) {
     var $this = $(this)
-      , href = $this.attr('href')
       , $ul = $this.closest('ul')
-      , $controlled
-      , current = $ul.find('.active a').attr('href')
+      , href = $this.attr('href')
+      , previous
 
     if (/^#\w+/.test(href)) {
       e.preventDefault()
@@ -39,11 +38,16 @@
         return
       }
 
+      previous = $ul.find('.active a')[0]
       $href = $(href)
 
       activate($this.parent('li'), $ul)
       activate($href, $href.parent())
-      $this.trigger("change", { from: current, to: href })
+
+      $this.trigger({
+        type: 'change'
+      , relatedTarget: previous
+      })
     }
   }
 

diff --git a/js/tests/unit/bootstrap-tabs.js b/js/tests/unit/bootstrap-tabs.js
index 3c2610c514ae238269e93e22a4369f0d7102c717..1d024ecbb0844e6ce2729ac6855d9122fc04c8de 100644 (file)
--- a/js/tests/unit/bootstrap-tabs.js
+++ b/js/tests/unit/bootstrap-tabs.js
@@ -51,21 +51,27 @@ $(function () {
           + '<li class="active"><a href="#home">Home</a></li>'
           + '<li><a href="#profile">Profile</a></li>'
           + '</ul>')
-          , changeCount = 0
-          , from
-          , to;
-
-        $tabsHTML.tabs().bind( "change", function (e, c){
-          from = c.from;
-          to = c.to;
-          changeCount++
-        })
-
-        $tabsHTML.tabs().find('a').last().click()
-
-        equals(from, "#home")
-        equals(to, "#profile")
-        equals(changeCount, 1)
+          , $target
+          , count = 0
+          , relatedTarget
+          , target
+
+        $tabsHTML
+          .tabs()
+          .bind( "change", function (e) {
+            target = e.target
+            relatedTarget = e.relatedTarget
+            count++
+          })
+
+        $target = $tabsHTML
+          .find('a')
+          .last()
+          .click()
+
+        equals(relatedTarget, $tabsHTML.find('a').first()[0])
+        equals(target, $target[0])
+        equals(count, 1)
       })
 
 })
\ No newline at end of file