3582
- 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="Здесь можно разместить какой-нибудь текст, который исполнит роль заголовка подсказки
Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. Ну а здесь будет текст самой подсказки. ">Ссылка 3</a>
Код:
$('a.main_text').tinyTips('blue', 'title');Можешь почитать и вот эту статейку "Варианты редиректа с помощью .htaccess"
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.