Помогите разобраться с JQuery плагином HoverCard!
Всем привет! Нашел очень хороший и удобный плагин для отображения дополнительной информации о чем либо по наведению курсора на объект. Вот ссылочка на плагин (там же документация и демонстрации работы):
http://designwithpc.com/Plugins/Hovercard Все бы хорошо, но никак не могу допетрить... Вот код одной из демок: <p>Текст с интересным <label id="demo-basic">словом</label> в содержании.</p> <div id="hiddenDiv"><p>Информация которая будет отображена как только курсор окажется над "словом" из строки выше.</p</div> $('#demo-basic') . hovercard ( // если курсор над словом с id = "demo-basic"
{
detailsHTML:$('#hiddenDiv') . html () // отображаем текст из блока (блок можно сделать скрытым) с id = "hiddenDiv"
});
И все хорошо работает! Но, только вот во всех демках идентификаторы событий указаны ЯВНО: - наведи курсор на что-то с id = 'myWord' и увидишь то-то из блока с id = 'infoBlock' А что если мне нужно делать вывод информации динамически?! И я не могу явно указать id'шники слов и панелей с инфой для них... К примеру: у меня в цикле выводится список постов и описаний к ним. Получается что-то типа: <div class = 'post_wrapper'> <div id = 'pt_id_1' class = 'post_title'>Заголовок 1</div> <div id = 'pi_id_1' class = 'post_info'>Описание 1</div> <div id = 'pt_id_2' class = 'post_title'>Заголовок 2</div> <div id = 'pi_id_2' class = 'post_info'>Описание 2</div> </div> И как вот мне сделать, чтобы по наведению курсора на заголовок какого-то поста, отображалось соответствующее описание ?! |
Delovar,
id будут одинаковы это нормально? |
Цитата:
|
Delovar,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.post_info{
display: none;
}
</style>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script language="JavaScript" src="http://dl.dropbox.com/u/40036711/Scripts/jquery.hovercard.js" type="text/javascript"></script>
</head>
<body>
<div class = 'post_wrapper'>
<div class = 'post_title'>Заголовок 1</div> <br />
<div class = 'post_info'>Описание 1</div><br />
<div class = 'post_title'>Заголовок 2</div><br />
<div class = 'post_info'>Описание 2</div><br />
<div class = 'post_title'>Заголовок 3</div><br />
<div class = 'post_info'>Описание 3</div><br />
<div class = 'post_title'>Заголовок 4</div><br />
<div class = 'post_info'>Описание 4</div><br />
</div>
<script type="text/javascript">
$('.post_wrapper .post_title').each(function (index, self) {
$(this).hovercard(
{'detailsHTML': $(this).nextAll('.post_info:first').text()}
)
})
</script>
</body>
</html>
|
Цитата:
Цитата:
|
Цитата:
|
Delovar,
Ночь ужо, Глазки не видят, - еще удобно и такие селекторы <div id = 'pi_ld_2' <div id = 'pi_Id_2' |
Текст отформатировал.
Вот оказывается как надо! Спасибо за помощь, теперь все работает! Пойду высплюсь)) Еще раз спасибо! (благодарно пожимаю руку) |
| Часовой пояс GMT +3, время: 13:59. |