Jquery добавьте куда-нибудь, затем переместите - PullRequest
Новая
       23

Jquery добавьте куда-нибудь, затем переместите

0 голосов
/ 03 февраля 2012

У меня есть что-то вроде подсказки, с которой у меня проблемы.У меня есть скрытый элемент div в элементе списка, который я хочу раскрыть при наведении мыши.Проблема в том, что в списке есть карусель, поэтому подсказка будет потеряна из-за переполнения, если это последний элемент.

Мое решение состояло в том, чтобы переместить элемент div наружу, который работает просто отлично, и отображается так, как мне нравится,Но у меня проблемы с выяснением, как вернуть его обратно.В div будут ссылки, так что мне нужно иметь возможность навести на него курсор.

Вот простая версия того, что я имею в виду: 

$('.wrapper li').mouseover(function() {
$(this).children('.This_is_hidden').clone().appendTo(".other").css('display', 'block' );

}
});


$('.wrapper li').mouseout(function() {

// i want to put it back in the same li

}

});

вот что такое markuo: 

<div class="wrapper">
<ul>
<li><a href="" title="Tall Glow"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a>
<div class="This_is_hidden">stuff that I want to move</div>
</li>
<li><a href="" title="Tall Glow"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a>
<div class="This_is_hidden">stuff that I want to move</div>
</li>
<li><a href="" title="Tall Glow"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a>
<div class="This_is_hidden">stuff that I want to move</div>
</li>
</ul>
</div>
<div class="other">
want to put the div here
</div>

Любая помощь будет оценена.

Ответы [ 2 ]

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

Назначьте временный класс перемещенному якору. Затем, когда вы mouseout, добавляете элемент с временным классом к элементу и удаляете временный класс.

Поскольку событие mouseout всегда происходит до события mouseover, достаточно одного уникального временного имени класса для работы со всеми элементами. 

$('.wrapper li').mouseover(function() {
    $(this).children('.This_is_hidden').appendTo(".other").css('display', 'block' )
       .addClass('magic-happens-here');
}).mouseout(function() {
    $('.magic-happens-here').appendTo(this).removeClass('magic-happens-here');
});
0 голосов
/ 03 февраля 2012

Лучшим решением этой проблемы было бы использование специально созданной функции jQuery hover(), которая предназначена для обработки функций ввода и вывода и, используя кодирование в HTML5, использует новые данные. * настраиваемые атрибуты для содержания вашего «всплывающей подсказки».

Во-первых, как я уже упоминал выше, свяжите функцию hover() с элементами списка-оболочки, например: 

$('.wrapper li').hover(function() {

    // This handles the mouse enter function

}, function() {

    // And this handles the mouse leave function

});

С полной документацией по функции hover() можно ознакомиться здесь на сайте API jQuery .

Затем в вашей HTML-разметке используйте атрибут data- *, добавив что-то вроде: data-tooltip-content="" к якорям в элементах списка - это будет выглядеть примерно так: 

<div class="wrapper">
    <ul>
        <li><a href="#" title="Tall Glow" data-tooltip-content="Stuff that I want to show for thumb 1"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a></li>
        <li><a href="#" title="Tall Glow" data-tooltip-content="Stuff that I want to show for thumb 2"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a></li>
        <li><a href="#" title="Tall Glow" data-tooltip-content="Stuff that I want to show for thumb 3"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a></li>
    </ul>
</div>

Документацию, поддерживающую новые пользовательские атрибуты data- *, можно найти на этом html5doctor веб-сайте .

Теперь вы можете добавить еще несколько функций jQuery между двумя обработчиками, чтобы добавить новый элемент на сайт для отображения содержимого всплывающей подсказки. Это можно сделать с помощью функции jQuery, однако этот элемент необходимо добавить на страницу, прежде чем вы сможете получить к нему доступ с помощью DOM. Вот как вы можете добавить и удалить его со страницы: 

$('.wrapper li').hover(function() {

    // Create a new division element to contain the tooltip content
    $('<div />')

    // Add required attributes to the new element
    .attr({

        // Assign an ID so we can remove this element later
        id : 'fly-tooltip',

        // Assign a class to the new element for styling
        class : 'tooltip'

    })

    // Insert the text from the current list item's data- attribute
    .text( $(this).children('a').attr('data-tooltip-content') )

    // Finally, append the new element to the page's body
    .appendTo('body');

}, function() {

    // Now call the jQuery function to remove the tooltip using the ID
    $('#fly-tooltip').remove();

});

Теперь вы можете настроить подсказку, используя класс для соответствующего позиционирования. В качестве альтернативы добавлению нового элемента в тело, вы можете добавить его в определенное место на своей странице, т.е. .appendTo('.wrapper').

Проверьте этот JSfiddle с кодом, который я объяснил выше, я добавил немного стилей, чтобы было легче видеть. Надеюсь, это поможет.

...