如何自定义Twitter Bootstrap popover隐藏动画 [英] How to customize Twitter Bootstrap popover hide animation
问题描述
我想实现自己的popover hide动画。目前,我正在修改bootstrap.js。
I would like to implement my own popover hide animation. Currently, I am modifying bootstrap.js directly.
$.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]();
}
}
})
}
我是谁我想知道是否还有,所以当我初始化popover时我可以实现动态动画
I would like to know if there are anyway so I can achieve a dynamic animation when I init the popover
$('#target').popover({
hide: function () {
//my own animation
}
});
推荐答案
好问题 - 脑筋急转弯!你绝对可以做到。看一看如何在不破坏原始源代码的情况下扩展插件:
Nice question-brain-teaser! You can definitely do it. Take a look how you can extend plugin without messing with original source code:
$.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);
我们走了!我们使用自己的扩展功能扩展了默认弹出框。现在让我们使用它:
Here we go! We extended default popover functionality with our own. Now lets use it:
$('.three').popover({
placement: 'bottom',
hide: function() {
$(this).animate({marginTop: -100}, function() {
$(this).css({marginTop: ''});
});
}
});
以上popover将在隐藏时具有自定义动画效果。
Above popover will have custom animation effect while hiding.
当然,如果你不提供隐藏
选项,你将有默认行为。
Of course if you don't provide hide
option you will have default behavior.
演示: http://jsfiddle.net/VHDwa/71/
这篇关于如何自定义Twitter Bootstrap popover隐藏动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!