Использование изотопа и всплывающих окон Twitter Bootstrap 2.x - размещение на лету

Ну, вот мой первый вопрос - и, к сожалению, для новичка - но если я проведу вас через свои мысли, я надеюсь, что кто-то поможет мне расширить мои навыки и разобрать этот макет?

  • я использую бутстрап
  • на одной странице у меня есть серия 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 подводят меня сюда (включая некоторую логику из другого ответа - [ссылка] Изменение положения всплывающих окон Bootstrap на основе позиции X всплывающего окна по отношению к краю окна?) были подключены к этому:

 $("#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);

Но моя проблема в том, что (я думаю, что изотоп возвращает значения ВСЕХ моих элементов, а не того, над которым я наведен - есть предложения?)


twitter-bootstrap popover jquery-isotope
person watcher    schedule 03.07.2013    source источник
comment
используйте var position = this.$element.data('isotope-item-position'); и замените return "left"; на this.options.placement = 'left' и т. д.   -  person Bass Jobsen    schedule 05.07.2013

Ответы (1)


arrow_upward
1
arrow_downward

Функция обратного вызова после создания всплывающей подсказки / всплывающего окна с помощью twitter bootstrap? показывает, как выполнить расширение 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, вам придется снова вызывать всплывающее окно. См. http://www.infinite-scroll.com/ "все параметры" бесконечной прокрутки необязательный обратный вызов при успешной загрузке нового содержимого. Используйте это для повторного вызова popover (). См .: http://bootply.com/66524 (при загрузке не загружайте вторую страницу).

полный источник:

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 position (). Это даст вам текущую позицию элемента относительно родителя смещения. Сравните это с .offset (), которая извлекает текущую позицию относительно документа. см. http://api.jquery.com/position/. isotope-item-position даст то же положение. Чтобы установить положение относительно видимых окон, см.:

и т.п.

person Bass Jobsen    schedule 03.07.2013
comment
Цените помощь - но я думаю, что мои знания js подводят меня, здесь была еще одна попытка, но у меня есть некоторые ошибки в моей консоли ... и я пробовал несколько вещей, но все еще без радости - person watcher; 05.07.2013