• 1549
  • 0
  • Автор: --------------
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt

Сегодня используя плагин TyniTips и библиотеку jQuery подключим на сайте всплывающие подсказки для элементов страниц.

1.Возьмём обычную ссылку, в общем виде она выглядит так

Код:
<a href="адрес cтраницы" title="Описание ссылки">Ccылка</a>
При наведении мыши на такую ссылку всплывет стандартно оформленная подсказка браузера с содержимым тега title
08270291.jpg (4.41 Kb)

2. сейчас красиво оформим всплывающую подсказку, для начала в секцию HEAD страницы подключим скрипты и стили,у кого подключен jquery повторно подключать не надо -это вторая строчка
Код:
<link rel="stylesheet" type="text/css" media="screen" href="{tpl_url}/css/tinyTips.css" />
<script type="text/javascript" src="{tpl_url}/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery.tinyTips.js"></script>

3. для нашей ссылки присвоим какой нибудь класс, назовем его к примеру .main

Код:
<a class="main" href="адрес cтраницы" title="Описание ссылки">Ccылка 1</a>
4.теперь в ту же секцию HEAD добавим скрипт-обработчик, который будет в коде страницы искать все ссылки с классом main и выводить для них красивые подсказки
Код:
<script type="text/javascript">
$(document).ready(function() {
$('a.main').tinyTips('light', 'title');
});
</script>
Данный скрипт найдёт все ссылки с классом main и выведет содержимое тега title во всплывающей подсказке. Еще один момент: для всплывающей подсказки доступны несколько цветовых схем, в данном случае цветовая схема будет light. (светло-серое оформление)
Доступны следующие цветовые схемы: light, blue, dark, green, orange, purple, red, white, yellow
Меняя этот параметр в коде скрипта-обработчика, мы мгновенно можем изменить цветовое оформление подсказок, например:
Код:
$('a.main').tinyTips('blue', 'title'); 
$('a.main').tinyTips('dark', 'title');
$('a.main').tinyTips('red', 'title');
и так далее.
5.Естественно, нужно предварительно залить в корневую папку своего сайта папку images с изображениями, а также файлы jquery-1.4.min.js, jquery.tinyTips.js, tinyTips.css.СкачатьВы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Итак, теперь при наведении на ссылку, мы увидим такой результат:
39000196.jpg (6.32 Kb)
А если нам нужно, например, вывести подсказку, содержащую текст и изображение? по порядку...итак создадим еще одну ссылку и присвоим ей сразу класс img_main:

Код:
<a class="img_main" href="адрес cтраницы" title="Описание ссылки">Ccылка 2</a>
в скрипт- обработчик добавляем строку:

Код:
$('a.img_main').tinyTips('yellow', '<img src="здесь вставляем адрес картинки" />
Здесь можно разместить какой-нибудь текст.');
здесь я выбрал другую цветовую схему, yellow. Смотрим, что получилось:
993730.jpg (21.36 Kb)
Отлично, скрипт нашел ссылку с классом img_main, и мы увидели всплывающую подсказку желтой цветовой схемы, содержащую изображение тигра и текст "Это тигр, очень сильный и красивый хищник".
По аналогии в подсказке можно разместить большое количество текста. Например так:

Код:
<a class="main_text" href="#" title="Здесь можно разместить какой-нибудь текст, который исполнит роль заголовка подсказки

Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. ">Ссылка 3</a>
Не забываем добавить в код скрипта-обработчика еще одну строку для класса main_text:

Код:
$('a.main_text').tinyTips('blue', 'title');
Вы можете изменять ширину всплывающих подсказок. это можно сделать в файле tinyTips.css для каждой цветовой схемы отдельно.

Можешь почитать и вот эту статейку "auth_social - авторизация через соцсети "

mistakes

Это тоже интересно

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

Ваше мнение

TWIG -что это?
Результаты

----