From: Jacob Thornton <jacobthornton@gmail.com>
Date: Fri, 30 Sep 2011 06:00:10 +0000 (-0700)
Subject: change event to use target and relatedTarget (which more closely resembles actual... 
X-Git-Tag: v1.4.0~62^2
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=a0bf8b67ff4dd827f9298563616ecc519e7924c8;p=thirdparty%2Fbootstrap.git

change event to use target and relatedTarget (which more closely resembles actual event api)
---

diff --git a/docs/javascript.html b/docs/javascript.html
index 1f5ad1a38f..956dfd0a83 100644
--- 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 938a54cc04..e0286a364a 100644
--- 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 3c2610c514..1d024ecbb0 100644
--- 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