gpt4 book ai didi

javascript - Twitter Bootstrap Popover 添加事件回调函数

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:44:55 25 4
gpt4 key购买 nike

我想实现一个基于鼠标点击位置定位的 Bootstrap Popover。看来我需要事件来告诉我鼠标的 x 和 y 位置以及弹出框的高度和宽度,以便正确计算此信息。

我目前正在做:

var pt = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
pt.call(this);
if (this.options.callback) {
this.options.callback();
}
};

$(this).popover({
container : 'body',
html: 'true',
title: '<div id="popover-title">Title </div>',
content : '<div id="popover-body">Information </div>',
callback: function() {
// position calculation here.
}
})

但我不知道如何从回调中获取事件。

我也不太确定这是否是正确的做法。如果不是,请指出。

提前致谢。

编辑:

我这样做是为了让它工作,感谢您的帮助。

$(this).popover({
placement: 'top',
container : 'body',
html: 'true',
title: '<div id="popover-title">Title </div>',
content : '<div id="popover-body">Information </div>',
trigger: 'manual'
}).click(function (e) {
var popover = $("#popover-title");
$(this).popover((popover.length != 0)? 'hide' : 'show');

popover = $("#popover-title");
if (popover && popover.parent() && popover.parent().parent()) {
popover = popover.parent().parent();
}

var left = e.pageX;
var top = e.pageY;
var height = popover.height();
var width = popover.width();

popover.css({
top: top - height,
left: left - width / 2 + 'px'
});
});

最佳答案

尝试

jQuery(function ($) {
var flag = false;
$(document).popover({
container: 'body',
html: 'true',
title: '<div id="popover-title">Title </div>',
content: '<div id="popover-body">Information </div>',
trigger: 'manual'
}).click(function (e) {
$(this).popover(flag ? 'hide' : 'show');
flag = !flag;
var pop = $(this).data('bs.popover');

//here pop.tip() will give the popover element also e can give the mouse cordinated

pop.tip().css({
top: e.pageX,
legt: e.pageY
})
});
});

演示:Fiddle

关于javascript - Twitter Bootstrap Popover 添加事件回调函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20208045/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com