我想实现我自己的弹出隐藏动画。目前,我直接修改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
}
});
好问题,脑筋急转弯!你绝对可以做到。看看如何在不破坏原始源代码的情况下扩展插件:
$.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在隐藏时会有自定义的动画效果。
当然如果你不提供hide
选项你将有默认行为。
Demo: http://jsfiddle.net/VHDwa/71/ http://jsfiddle.net/VHDwa/71/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)