【问题标题】:Twitter Bootstrap Popover add a callback function with eventTwitter Bootstrap Popover 添加带有事件的回调函数
【发布时间】:2013-12-11 01:30:37
【问题描述】:

我想实现一个基于鼠标点击位置定位的 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'
      });
    });

【问题讨论】:

标签: javascript jquery css twitter-bootstrap


【解决方案1】:

试试

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

【讨论】:

  • 这个demo好像有点奇怪,但是我采用了这个方法,似乎帮助很大。谢谢。我会尽快更新问题。
  • @user959974 在演示中我只是试图展示如何获取鼠标位置和弹出框元素....我没有尝试正确定位弹出框..希望你能弄清楚
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-04-08
  • 2012-01-29
  • 1970-01-01
相关资源
最近更新 更多