0

好吧，这是我的第一个问题——可悲的是一个新手——但如果我带你思考一下，我希望有人能帮助我扩展我的技能并整理好这个布局？

  • 我正在使用引导程序
  • 在一个页面中，我有一系列与同位素完美配合的 div（+ 无限滚动）
  • 当用户将鼠标悬停在每个 div 上时，我想要一个弹出框来显示有关该元素的更多信息
  • 这我可以开始使用data-container="body"

到目前为止，一切都很好..

接下来，我使用以下方法找到了每个元素的正确位置：

 $('#container').isotope({
 itemSelector: '.item',
 itemPositionDataEnabled: true
 })
 // log position of each item
 .find('.item').each(function(){
 var item_position = $(this).data('isotope-item-position');
 console.log('item position is x: ' + item_position.x + ', 
 y: ' + item_position.y);});

（来自http://isotope.metafizzy.co/docs/options.html#itempositiondataenabled）

所以现在我遇到的问题是如何根据同位素日志给我的值影响弹出框的位置-因此，如果将元素放置在视口的最右侧-然后弹出框显示到左边或下面（而不是隐藏在视线之外）。

感谢您对此的任何帮助和指导-几乎尝试了我在这里找到的任何答案，但我无法让它们起作用..

（我已经整理了一个快速（并且由于某种原因同位素不起作用）小提琴来试图解释我在这里想要实现的目标：http: //jsfiddle.net/watcher/Kv8Bw/1/）

下次尝试发布@Bass 帮助：

@bass - 感谢帮助 - 但我认为我的 js 知识让我失望了（包括来自另一个答案的一些逻辑 - [链接]根据弹出框相对于窗口边缘的 X 位置更改 Bootstrap 弹出框的位置？）插上这个：

 $("#popover").popover({
 trigger: "hover focus"
 }); 

 var tmp = $.fn.popover.Constructor.prototype.show;
 $.fn.popover.Constructor.prototype.show = function () {

 var items = Array('top','bottom','left','right');   
 var position =  $(this).data('isotope-item-position');

 if (position.left > 515) {
 return "left";
 }

 if (position.left < 515) {
 return "right";
 }

 if (position.top < 110){
 return "bottom";
 }

 return "top";
 }


 tmp.call(this);

但我的问题是（我认为同位素正在返回我所有物品的值，而不是我悬停的那个 - 有什么建议吗？）

4

1 回答 1

1

使用 twitter 引导程序创建工具提示/弹出框后的回调函数？显示如何扩展 javascript。使用它根据显示前计算的位置添加展示位置：

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {

  /* random placement add your calcuations based $(this).data('isotope-item-position'); on here: */  
  var items = Array('top','bottom','left','right');
  this.options.placement = items[Math.floor(Math.random()*items.length)]; 
  // from: https://stackoverflow.com/questions/5915096/get-random-item-from-array-with-jquery

  tmp.call(this);
}

见：http ://bootply.com/66412

更新

在您的扩展显示函数this.$element中是对触发弹出窗口的元素的引用。您可以使用它来获取其位置（http://api.jquery.com/position/）。

 var tmp = $.fn.popover.Constructor.prototype.show;
 $.fn.popover.Constructor.prototype.show = function () {

 var position = this.$element.position();
 if(position.top<50){this.options.placement = 'bottom'}
 else if(position.top>150){this.options.placement = 'top'}
 else if(position.left<200){this.options.placement = 'right'}
 else {this.options.placement = 'left'}

 tmp.call(this);
 }

见：http ://bootply.com/66412 （也更新了）

https://stackoverflow.com/a/12656175/1596547将通过将放置作为函数调用来提供更好的解决方案：

var options = {
placement: function (context, source) {
    var position = $(source).position();

    if (position.top < 100){
        return "bottom";
    }

    if (position.top > 800){
        return "top";
    }

    if (position.left > 484) {
        return "left";
    }

    //if (position.left < 485) {
    else
    {   
        return "right";
    }

}
, trigger: "click",
title: 'popover',
content: 'content of a popover'
};
$('.element').popover(options);
}

popover()不是“现场”功能。当新元素插入 DOM 时，您将不得不再次调用 popover。请参阅http://www.infinite-scroll.com/ “所有选项”无限滚动在新内容成功加载时有一个可选的回调。使用它再次调用 popover()。请参阅：http ://bootply.com/66524（bootply 不加载第二页）。

完整来源：

function setpopover()
{

    var options = {
    placement: function (context, source) {
        var position = $(source).position();

        if (position.top < 100){
            return "bottom";
        }

        if (position.top > 800){
            return "top";
        }

        if (position.left > 484) {
            return "left";
        }

        //if (position.left < 485) {
        else
        {   
            return "right";
        }

    }
    , trigger: "click",
    title: 'popover',
    content: 'content of a popover'
    };
    $('.element').popover(options);
}   


    $(function(){

      var $container = $('#container');

      $container.isotope({
        itemSelector : '.element',
        itemPositionDataEnabled: true
      });

      $container.infinitescroll({
        navSelector  : '#page_nav',    // selector for the paged navigation 
        nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.element',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
          }
        },
        // call Isotope as a callback
        function( newElements ) {
          $container.isotope( 'appended', $( newElements ) );
          setpopover();
        }
      );

    setpopover()



    });

注意：元素的位置由 jQuery 的位置 () 给出。这将为您提供元素相对于偏移父级的当前位置。将此与 .offset() 进行对比，后者检索相对于文档的当前位置。见：http ://api.jquery.com/position/ 。isotope-item-position 将给出相同的位置。要设置相对于可见窗口的位置，请参见：

等等

于 2013-07-03T22:55:25.960 回答