update all to new on api + add animation support to tabs

7 files changed, 45 insertions, 27 deletions

diff --git a/js/README.md b/js/README.md
index 107dd1528..061509fd3 100644
--- a/js/README.md
+++ b/js/README.md
@@ -9,11 +9,11 @@ We believe you should be able to use all plugins provided by Bootstrap purely th
 
 We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
 
-    $('body').unbind('.data-api')
+    $('body').off('.data-api')
 
 To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:
 
-    $('body').unbind('.alert.data-api')
+    $('body').off('.alert.data-api')
 
 ---
 
diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js
index db9116f76..af15cbd7b 100644
--- a/js/bootstrap-alert.js
+++ b/js/bootstrap-alert.js
@@ -46,7 +46,7 @@
       }
 
       $.support.transition && $element.hasClass('fade') ?
-        $element.bind($.support.transition.end, removeElement) :
+        $element.on($.support.transition.end, removeElement) :
         removeElement()
     }
 
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index 38f4f51a2..f2624ec1c 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -96,7 +96,7 @@
   function hideWithTransition() {
     var that = this
       , timeout = setTimeout(function () {
-          that.$element.unbind($.support.transition.end)
+          that.$element.off($.support.transition.end)
           hideModal.call(that)
         }, 500)
 
@@ -156,11 +156,11 @@
   function escape() {
     var that = this
     if (this.isShown && this.options.keyboard) {
-      $(document).bind('keyup.dismiss.modal', function ( e ) {
+      $(document).on('keyup.dismiss.modal', function ( e ) {
         e.which == 27 && that.hide()
       })
     } else if (!this.isShown) {
-      $(document).unbind('keyup.dismiss.modal')
+      $(document).off('keyup.dismiss.modal')
     }
   }
 
diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js
index a0495ce69..53edfc8c9 100644
--- a/js/bootstrap-popover.js
+++ b/js/bootstrap-popover.js
@@ -63,8 +63,7 @@
 
   , tip: function() {
       if (!this.$tip) {
-        this.$tip = $('<div class="popover" />')
-          .html(this.options.template)
+        this.$tip = $(this.options.template)
       }
       return this.$tip
     }
@@ -90,7 +89,7 @@
   $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, {
     placement: 'right'
   , content: ''
-  , template: '<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>'
+  , template: '<div class="popover"><div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div></div>'
   })
 
 }( window.jQuery )
\ No newline at end of file
diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js
index 3c271793c..041cfcb45 100644
--- a/js/bootstrap-scrollspy.js
+++ b/js/bootstrap-scrollspy.js
@@ -27,7 +27,7 @@
   function ScrollSpy( element ) {
     var process = $.proxy(this.process, this)
 
-    this.$scrollElement = $(element).bind('scroll.scroll.data-api', process)
+    this.$scrollElement = $(element).on('scroll.scroll.data-api', process)
     this.selector = (this.$scrollElement.attr('data-target')
       || this.$scrollElement.attr('href')
       || '') + ' .nav li > a'
diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js
index e0a92816d..2f147c59d 100644
--- a/js/bootstrap-tab.js
+++ b/js/bootstrap-tab.js
@@ -52,26 +52,45 @@
       $href = $(href)
 
       this.activate($this.parent('li'), $ul)
-      this.activate($href, $href.parent())
-
-      $this.trigger({
-        type: 'shown'
-      , relatedTarget: previous
+      this.activate($href, $href.parent(), function () {
+        $this.trigger({
+          type: 'shown'
+        , relatedTarget: previous
+        })
       })
     }
 
-  , activate: function ( element, container ) {
-      container
-        .find('> .active')
-        .removeClass('active')
-        .find('> .dropdown-menu > .active')
-        .removeClass('active')
+  , activate: function ( element, container, callback) {
+      var $active = container.find('> .active')
+        , transition = callback
+            && $.support.transition
+            && $active.hasClass('fade')
+
+      function next() {
+        $active
+          .removeClass('active')
+          .find('> .dropdown-menu > .active')
+          .removeClass('active')
 
-      element.addClass('active')
+        element.addClass('active')
 
-      if ( element.parent('.dropdown-menu') ) {
-        element.closest('li.dropdown').addClass('active')
+        if (transition) {
+          element[0].offsetWidth // reflow for transition
+          element.addClass('in')
+        }
+
+        if ( element.parent('.dropdown-menu') ) {
+          element.closest('li.dropdown').addClass('active')
+        }
+
+        callback && callback()
       }
+
+      transition ?
+        $active.one($.support.transition.end, next) :
+        next()
+
+      $active.removeClass('in')
     }
   }
 
diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js
index ee9a415fd..ab744b7c5 100644
--- a/js/bootstrap-twipsy.js
+++ b/js/bootstrap-twipsy.js
@@ -167,7 +167,7 @@
       }
 
       $.support.transition && this.$tip.hasClass('fade') ?
-        $tip.bind( $.support.transition.end, removeElement) :
+        $tip.on($.support.transition.end, removeElement) :
         removeElement()
     }
 
@@ -196,7 +196,7 @@
     }
 
   , tip: function () {
-      return this.$tip = this.$tip || $('<div class="twipsy" />').html(this.options.template)
+      return this.$tip = this.$tip || $(this.options.template)
     }
 
   , validate: function () {
@@ -256,7 +256,7 @@
   , placement: 'above'
   , trigger: 'hover'
   , title: ''
-  , template: '<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>'
+  , template: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>'
   }
 
 }( window.jQuery )
\ No newline at end of file