3983
- 0
- Автор: --------------
- Адаптировал: irbees2008
- Уровень сложности исполнения: нужны навыки css hmlt
Сегодня используя плагин TyniTips и библиотеку jQuery подключим на сайте всплывающие подсказки для элементов страниц.
1.Возьмём обычную ссылку, в общем виде она выглядит так
Код:
<a href="адрес cтраницы" title="Описание ссылки">Ccылка</a>
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>
Код:
<script type="text/javascript">
$(document).ready(function() {
$('a.main').tinyTips('light', 'title');
});
</script>
Доступны следующие цветовые схемы: 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="здесь вставляем адрес картинки" />
Здесь можно разместить какой-нибудь текст.');
Отлично, скрипт нашел ссылку с классом img_main, и мы увидели всплывающую подсказку желтой цветовой схемы, содержащую изображение тигра и текст "Это тигр, очень сильный и красивый хищник".
По аналогии в подсказке можно разместить большое количество текста. Например так:
Код:
<a class="main_text" href="#" title="Здесь можно разместить какой-нибудь текст, который исполнит роль заголовка подсказки<br> <br> Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. ">Ссылка 3</a>
Код:
$('a.main_text').tinyTips('blue', 'title');Можешь почитать и вот эту статейку "Плагин "Архив сайта""
Это тоже интересно
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
