如何自定義Twitter Bootstrap彈出窗口隱藏動畫

Question

我想實現我自己的彈出窗口隱藏動畫。目前，我正在直接修改bootstrap.js。

$.fn.popover = function (option) { 
      return this.each(function() { 
       var $this = $(this) 
        , data = $this.data('popover') 
        , options = typeof option == 'object' && option 
       if (!data) $this.data('popover', (data = new Popover(this, options))) 

       //original code 
       // if (typeof option == 'string') data[option]() 
       //custom code 
       if (typeof option == 'string') { 
        if (option === 'hide') { 
         //my customize animation here 
        } 
        else { 
         data[option](); 
        } 

       } 

      }) 
     } 

我想知道是否有反正讓我可以實現動態的動畫時，我初始化的酥料餅

$('#target').popover({ 
    hide: function() { 
     //my own animation 
    } 
}); 

Answer 1

有趣的問題 - 大腦傳情！你絕對可以做到。看看如何擴展插件，而不會搞亂原始源代碼：

$.fn.popover = function (orig) { 
    return function(options) { 
    return this.each(function() { 
     orig.call($(this), options); 
     if (typeof options.hide == 'function') { 
     $(this).data('bs.popover').hide = function() { 
      options.hide.call(this.$tip, this); 
      orig.Constructor.prototype.hide.call(this); 
     }; 
     } 
    }); 
    } 
}($.fn.popover); 

這裏我們開始吧！我們用我們自己的擴展默認彈出功能。現在，讓我們使用它：

$('.three').popover({ 
    placement: 'bottom', 
    hide: function() { 
    $(this).animate({marginTop: -100}, function() { 
     $(this).css({marginTop: ''}); 
    }); 
    } 
}); 

以上酥料餅將有自定義動畫效果，而隱藏。

當然，如果您不提供hide選項，您將具有默認行爲。

演示：http://jsfiddle.net/VHDwa/71/