Форум

Delovar · #1 (**permalink**) 08.02.2013, 23:45

Всем привет! Нашел очень хороший и удобный плагин для отображения дополнительной информации о чем либо по наведению курсора на объект. Вот ссылочка на плагин (там же документация и демонстрации работы):

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>

И как вот мне сделать, чтобы по наведению курсора на заголовок какого-то поста, отображалось соответствующее описание ?!

рони · #2 (**permalink**) 09.02.2013, 00:41

Delovar,
id будут одинаковы это нормально?

Delovar · #3 (**permalink**) 09.02.2013, 01:28

Сообщение от рони

Delovar,
id будут одинаковы это нормально?

Не должно быть одинаковых id. О чем Вы ?

рони · #4 (**permalink**) 09.02.2013, 01:42

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>

рони · #5 (**permalink**) 09.02.2013, 01:44

Сообщение от Delovar

Не должно быть одинаковых id. О чем Вы ?

Сообщение от Delovar

<div id = 'pt_id_2' class = 'post_title'>Заголовок 2</div>
<div id = 'pi_id_2'

в вашем коде именно так

Delovar · #6 (**permalink**) 09.02.2013, 03:30

Сообщение от рони

в вашем коде именно так

А разве они одинаковые? Посмотрите внимательно.

Deff · #7 (**permalink**) 09.02.2013, 03:34

Delovar,
Ночь ужо, Глазки не видят, - еще удобно и такие селекторы
<div id = 'pi_ld_2'
<div id = 'pi_Id_2'

Delovar · #8 (**permalink**) 09.02.2013, 03:40

Текст отформатировал.
Вот оказывается как надо! Спасибо за помощь, теперь все работает! Пойду высплюсь)) Еще раз спасибо! (благодарно пожимаю руку)

Форум

Справочник

Discord чат

Курсы javascript