Интеграция jQuery Tooltip и Mouseover - PullRequest
Новая
       6

Интеграция jQuery Tooltip и Mouseover

1 голос
/ 11 февраля 2012

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

Кроме того, когда нажата точка или ссылка во всплывающей подсказке, мне нужна подсказка, чтобы очистить и отключить.На iPad я заметил, что после щелчка по ссылке всплывающей подсказки на страницу проекта, а затем возврата на страницу карты с помощью кнопки «Назад» последняя подсказка по какой-то причине остается открытой.На десктопах проблема не возникает, но на мобильных устройствах мне нужно очистить ее, когда они нажимают кнопку «назад».

Вот сайт, на который я ссылаюсь: http://www.digitour360.com/mit/и таблица стилей здесь: http://www.digitour360.com/mit/css/stylesheet.css

Ниже приведен код CSS спрайта для каждой кнопки - я пытаюсь как-то связать их с каждой из подсказок.Например, если мышь перемещается над кнопкой красного круга 11 и затем на всплывающую подсказку для кнопки 11, я не хочу, чтобы состояние наведения красного круга отключалось до тех пор, пока оно не покинет подсказку. 

#button { background:transparent url(../images/red-circle.png) no-repeat scroll 0px -2px; display:block; height:23px; width:23px; } #button:hover { background-position:0 -25px; opacity: 1; }'

And OneБолее того, каков наилучший способ убедиться, что всплывающая подсказка закрыта при нажатии на любую ссылку внутри нее?По какой-то причине на мобильных устройствах, когда вы нажимаете пальцем, чтобы открыть состояние наведения, а затем нажимаете на ссылку, если вы нажимаете кнопку «Назад», всплывающая подсказка остается открытой.

1 Ответ

1 голос
/ 12 февраля 2012

Вы можете использовать события onShow и onHide в каждой из ваших всплывающих подсказок и вносить изменения в объект триггера. Я покажу вам это с вашим кодом. Вот ваши дивы триггерной кнопки: 

<div id="eleven_div" class="button-eleven" style="display: block; ">
    <a href="projects/gantt/" id="button">Button 11</a>
</div>
<div id="ten_div" class="button-ten" style="display: block; ">
    <a href="projects/table/" id="button">Button 10</a>
</div>
...

И соответствующий ему javascript: 

$(".button-one").tooltip({
    position: "center right",
    delay:300,
    effect: 'slide',
    direction:'right',
    offset: [30, -12],
    slideOffset: 30,
    slideFade:'true',
    slideInSpeed:350,
    slideOutSpeed:250
});

$(".button-two").tooltip({ 
    position: "bottom left",
    delay:300,
    effect: 'slide',
    direction:'left',
    offset: [-34, 20],
    slideOffset: 30,
    slideFade:'true',
    slideInSpeed:350,
    slideOutSpeed:250
});
...

Сначала у вас есть атрибут id = "button" внутри каждого из ваших a-тегов внутри div-ов. Это абсолютно неправильно. Идентификаторы не должны встречаться дважды. Так что лучше поменяйте это на классы: 

<div id="eleven_div" class="button-eleven" style="display: block; ">
    <a href="projects/gantt/" class="button">Button 11</a>
</div>
<div id="ten_div" class="button-ten" style="display: block; ">
    <a href="projects/table/" class="button">Button 10</a>
</div>

Теперь поместите функцию обратного вызова для отображения красных точек. Функция вызывается каждый раз, когда отображается всплывающая подсказка или будет снова скрыта. И это добавляет или удаляет класс к a-тегу внутри запускающего div. Новый код: 

function hovering()
{
    this.getTrigger().find("a").first().toggleClass("hovered");
}

$(document).ready(function() {

    $(".button-one").tooltip({
        position: "center right",
        delay:300,
        effect: 'slide',
        direction:'right',
        offset: [30, -12],
        slideOffset: 30,
        slideFade:'true',
        slideInSpeed:350,
        slideOutSpeed:250,
        onShow: hovering,
        onHide: hovering
    });

    $(".button-two").tooltip({ 
        position: "bottom left",
        delay:300,
        effect: 'slide',
        direction:'left',
        offset: [-34, 20],
        slideOffset: 30,
        slideFade:'true',
        slideInSpeed:350,
        slideOutSpeed:250,
        onShow: hovering,
        onHide: hovering
    });
...

Наконец, измените свой код CSS, где стили для #button расположены в этом: 

.button {
    background:transparent url(../images/red-circle.png) no-repeat scroll 0px -2px;
    display:block;
    height:23px;
    width:23px;
    overflow:hidden;
    text-indent:-999em;
    cursor:pointer;
    opacity: 1;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}

/**
 * mouseover state, 
 * elements with the "hovered" class now behave
 * like ones in mouseover state
 */
.button:hover, .button.hovered{
    background-position:0 -25px;    
    opacity: 1;
}

/* clicked state */
.button:focus {
    background-position:0 -25px;
}

Чтобы всплывающая подсказка закрывалась при нажатии на ссылку, поместите этот код после определения подсказки: 

$(".tooltip, .tooltip-brite, ... all your tooltip-classes").live("click", function() {  
    $(this).prev().tooltip().hide();
});

$(".button-two, .button-one, ... all your button-classes").live("click", function() {   
    $(this).tooltip().hide();
});

Это закроет всплывающую подсказку, когда эфира div с красной точкой внутри или щелкает окно всплывающей подсказки.

...