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

Question

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

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

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

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

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

6

javascript jquery dom jquery-plugins qtip

задан msvalkon 5 January 2010 в 10:59

3 ответа

Другие вопросы по тегам:

javascript jquery dom jquery-plugins qtip

Похожие вопросы:

score 1 · Answer 1

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

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

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

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

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

score 32 · Answer 2

См. мое обновление внизу

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

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

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

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

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

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

ОБНОВЛЕНИЕ:

Вот правильный способ сделать это, напрямую от самого разработчика 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
      }
   });
})

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

score -1 · Answer 3

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

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

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