Проблема с qTip - Советы не отображаются, потому что элементы загружаются после скрипта - PullRequest
Новая
       12

Проблема с qTip - Советы не отображаются, потому что элементы загружаются после скрипта

6 голосов
/ 05 января 2010

Я не очень разбираюсь в javascript, jQuery или его плагинах, но обычно я справляюсь. В любом случае, мой клиент создает сайт, и одна из его целей - собирать новостные статьи с разных сайтов и показывать заголовки в неупорядоченных HTML-списках. У меня нет доступа к его коду, новостные статьи загружаются довольно медленно (значительно после загрузки сайта).

Я использую qTIP, и идея в том, что когда вы наводите курсор мыши на заголовок новости, он генерирует всплывающую подсказку. Это отлично работает в моей среде разработчиков, потому что у меня есть фиктивные заголовки, которые не генерируются нигде.

Проблема в том, что, как только клиент настраивает сайт в своей тестовой среде, сценарии, загружающие заголовки новостей в списки, настолько медленны, что сценарий qTIP загружается до того, как в списках появляются какие-либо элементы. Следовательно, он не знает о каких-либо <li>, которые можно было бы подбирать и генерировать всплывающие подсказки.

Есть ли способ убедиться, что ВСЕ новостные статьи загружаются до всплывающей подсказки? грузы? Я думаю, что простая задержка загрузки скрипта не очень разумна, потому что некоторые заголовки загружаются дольше, чем другие, поэтому задержка должна быть довольно большой.

Ответы [ 4 ]

32 голосов
/ 21 марта 2010

Смотрите мое обновление внизу

Я тоже работал над этой проблемой и придумал решение, аналогичное предложенному @Gaby. Проблема с решением @ Gaby заключается в том, что он не создает qTip, пока не произошло событие mouseover. Это означает, что вы не увидите qTip при первом наведении мыши, но увидите во второй раз. Кроме того, он будет воссоздавать qTip каждый раз, когда вы наводите курсор мыши, что не совсем оптимально.

Я выбрал следующее решение: 

$("li").live('mouseover', function() {
    var target = $(this);
    if (target.data('qtip')) { return false; }
    target.qtip(...);
    target.trigger('mouseover');
});

Вот что он делает:

  • Устанавливает цель для элемента li
  • Возвращает, если этот элемент li уже имеет qtip
  • Если в li нет qtip, то к нему применяется qtip
  • Снова отправляет триггер мыши, чтобы активировать qtip

Я знаю, что это немного глупо, но, похоже, работает. Также обратите внимание, что версия qTip 2.0 должна поддерживать live () в качестве опции. Насколько я могу судить, текущая ветка разработки пока не поддерживает ее.

UPDATE:

Вот правильный способ сделать это, прямо от самого разработчика qtip на форумах: 

$('selector').live('mouseover', function() {
   $(this).qtip({
      overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
      content: 'I\'m a live qTip', // comma was missing here
      show: {
         ready: true // Needed to make it show on first mouseover event
      }
   });
})

Так что сначала убедитесь, что вы не воссоздаете новые qtips каждый раз при наведении курсора на «overwrite: false». Затем он делает показ qtip при первом наведении мыши с помощью «show: {ready: true}».

1 голос
/ 31 марта 2012

Не даром, но я только добавил show:{ready:true} в мое onmouseover событие. Это работает в Chrome & FF.

1 голос
/ 05 января 2010

Вы должны использовать Live Events фреймворка jQuery.

Связывает обработчик с событием (например, щелчком) для всех текущих и будущих элементов. Может также связывать пользовательские события.

так, например, вы могли бы сделать что-то вроде 

$("li").live( 'mouseover', function(){ 
                                     $(this).qTip(...); 
                                     });

ref: http://docs.jquery.com/Events/live

0 голосов
/ 24 марта 2010

Да, я придумал нечто подобное. Я думаю, что кто-то опубликовал аналогичный на своих форумах. Я изменил mouseover-событие на mousemove, так что qtip активируется при первом наведении мыши. 

$('li').live('mousemove', function() {
  if( !$(this).data('qtip') ) {
     $(this).qtip(...)

Я также согласен с тем, что это очень хакерское решение, однако я не смог придумать лучшего. Возможно, было бы лучше проверить и применить qtip в функции обратного вызова, которая заполняет li, но у меня действительно нет доступа к этому коду.

...