qTip плагин jQuery не всегда срабатывает - PullRequest
Новая
       23

qTip плагин jQuery не всегда срабатывает

0 голосов
/ 03 июня 2010

Я использую плагин qTip jquery Плагин qTip для веб-сайта, над которым я работаю, основываясь на другой теме, которую я поднял здесь: поток переполнения стека

У меня вопрос: у меня в верхней части экрана работает панель навигации, которая в основном устанавливает атрибут заголовка на основе меню вкладки, в котором вы находитесь, все они хранятся в массиве javascript.

Например, у меня есть три пункта меню, идущие вдоль верхней части экрана, скажем, Меню A, Меню B и Меню C.

У меня также есть информационное изображение, расположенное в крайнем правом положении навигационной панели, и я установил атрибут заголовка на основе параметра меню, выбранного на навигационной панели.

Например: 

Menu A => myRole[0] = "Admin"
Menu B => myRole[1] = "Manager"
Menu C => myRole[2] = "Guest"

Таким образом, в основном, когда пользователь нажимает на каждое из меню в навигационной панели, я устанавливаю атрибут заголовка на информационном изображении либо «Администратор», «Менеджер» или «Гость».

При запуске плагин qTip работает и отображает «Admin», когда я наводю на него курсор, но когда я меняю меню на Меню C, он по-прежнему отображает «Admin» вместо «Гость»

Судя по всему, он не вызывает плагин qTip, который я разместил в нижнем колонтитуле экрана (см. Фактический код ниже).

Есть идеи, как сделать так, чтобы qTip срабатывал каждый раз, когда я щелкаю / меняю опции меню и значение пикапов в массиве javascript? 

<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>



<script type="text/javascript"> 
$(document).ready(function()
{
   $('div#infoi img[title]').qtip({
      position: { 
         adjust: { x:-110, y:0 },
         corner: {
            target: 'bottomLeft',
            tooltip: 'topMiddle'
         }
      },
      style: {
        width: 250,
        padding: 5,
        background: '#E7F1FA',
        color: 'black',
        textAlign: 'center',
        border: {
          width: 3,
          color: '#65a9d7'
        },
        tip: 'topRight'
      }
   });
});
</script>

Спасибо.

1 Ответ

0 голосов
/ 18 сентября 2013

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

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

var qtipset = function(){
      $('div#infoi img[title]').qtip({
      position: { 
         adjust: { x:-110, y:0 },
         corner: {
            target: 'bottomLeft',
            tooltip: 'topMiddle'
         }
      },
      style: {
        width: 250,
        padding: 5,
        background: '#E7F1FA',
        color: 'black',
        textAlign: 'center',
        border: {
          width: 3,
          color: '#65a9d7'
        },
        tip: 'topRight'
      }
   });
     }</p>

<p>

В вашем Javascript, где вы обновляете заголовок вашего изображения с помощью выбранного текста меню сразу после изменения атрибута заголовка на изображении, также вызывайте эту функцию как qtipset(); Это тогда перечитало бы заголовок и инициализировало элементы qtip на странице, чтобы в следующий раз при наведении указателя мыши вызвать функцию qtip с правильными данными.

...