Хаки и Скрипты Next Generation CMS : Меню и навигация, Tooltips : Всплывающие подсказки для страниц сайта

irbees2008 Опубликовано - 13 - июня Меню и навигация

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

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

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

Код:

<a href="адрес cтраницы" title="Описание ссылки">Ccылка</a>

При наведении мыши на такую ссылку всплывет стандартно оформленная подсказка браузера с содержимым тега title

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.СкачатьВы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Итак, теперь при наведении на ссылку, мы увидим такой результат:

А если нам нужно, например, вывести подсказку, содержащую текст и изображение? по порядку...итак создадим еще одну ссылку и присвоим ей сразу класс img_main:

Код:

<a class="img_main" href="адрес cтраницы" title="Описание ссылки">Ccылка 2</a>

в скрипт- обработчик добавляем строку:

Код:

$('a.img_main').tinyTips('yellow', '<img src="здесь вставляем адрес картинки" />
Здесь можно разместить какой-нибудь текст.');

здесь я выбрал другую цветовую схему, yellow. Смотрим, что получилось:

Отлично, скрипт нашел ссылку с классом img_main, и мы увидели всплывающую подсказку желтой цветовой схемы, содержащую изображение тигра и текст "Это тигр, очень сильный и красивый хищник".
По аналогии в подсказке можно разместить большое количество текста. Например так:

Код:

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

 Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. ">Ссылка 3</a>

Не забываем добавить в код скрипта-обработчика еще одну строку для класса main_text:

Код:

$('a.main_text').tinyTips('blue', 'title');

Вы можете изменять ширину всплывающих подсказок. это можно сделать в файле tinyTips.css для каждой цветовой схемы отдельно.

Можешь почитать и вот эту статейку "Красивый слайдер на флеш анимации"

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

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