Хаки и Скрипты 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 для каждой цветовой схемы отдельно.

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

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

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