javascript - 如何自定义 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: ''});
    });
  }
});

上面的popover隐藏时会有自定义动画效果。

当然，如果您不提供隐藏选项，您将具有默认行为。

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