14 апр 2016
Как создать стильные подсказки для сайта
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Как создать стильные подсказки для сайта

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Как создать стильные подсказки для сайта

Подсказки являются неотъемлемой частью сайта, который содержит множество текстовой информации, по этому в данном уроке речь пойдет о создании подсказок с использованием плагина TyniTips, суть состоит в том, когда при наведении курсора мыши на выделенное слово или объект плавно всплывает подсказка с необходимым текстом, изображением или другим медиафайлом для предоставления дополнительной информации посетителю, плагин достаточно легок в использовании и не составит особого труда при внедрении в верстку сайта, и так, давайте же посмотрим что у нас с этого получилось.



Для начала нам необходимо подключить jQuery и сам плагин, для этого нам необходимо вставить следующий код между тегами head:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinyTips.js"></script>


Далее мы формируем непосредственно подсказки, для необходимых элементов:

<script type="text/javascript">
$(document).ready(function() {
    $('a.tTip').tinyTips('light', 'title');
    $('a.imgTip').tinyTips('yellow', '<img src="images/demo-image.jpg" /><br />Rudebox.org.ua - Информационный блог, в котором публикуются новости веб-дизайна, а так же информация и советы по созданию сайтов, шаблонов,и многое другое интересное с интернет мира.');
    $('img.tTip').tinyTips('green', 'title');
    $('h1.tagline').tinyTips('blue', 'tinyTips - Урок по созданию всплывающих подсказок!');
});
</script>


Вызов плагина сопровождается передачей ему двух аргументов. Первый аргумент указывает на стиль отображения подсказки. Второй аргумент указывает на источник контента подсказки.

Затем мы задаем стили для наших подсказок, стиль для подсказки имеет три раздела. В общем разделе задается стиль для всей подсказки в целом. В разделе нижней части (класс .bottom) можно установить изображение указателя на элемент, для которого выводится подсказка, выглядит следующим образом:

.lightTip                    { width: 342px; }
.lightTip .content                { width: 310px; padding: 10px; border: 6px solid #e2e2e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #ffffff; color: #020202; }
.lightTip .bottom                { height: 14px; background: url(../images/notch-white.png) top center no-repeat; }

.yellowTip                    { width: 342px; }
.yellowTip .content                { width: 310px; padding: 10px; border: 6px solid #f9e98e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbf7aa; color: #020202; }
.yellowTip .bottom                { height: 14px; background: url(../images/notch-yellow.png) top center no-repeat; }

.orangeTip                    { width: 342px; }
.orangeTip .content                { width: 310px; padding: 10px; border: 6px solid #f9cd8e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbe3aa; color: #020202; }
.orangeTip .bottom                { height: 14px; background: url(../images/notch-orange.png) top center no-repeat; }

.redTip                        { width: 342px; }
.redTip .content                { width: 310px; padding: 10px; border: 6px solid #ce6f6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #f79992; color: #020202; }
.redTip .bottom                    { height: 14px; background: url(../images/notch-red.png) top center no-repeat; }

.greenTip                    { width: 342px; }
.greenTip .content                { width: 310px; padding: 10px; border: 6px solid #a9db66; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #cae8a2; color: #020202; }
.greenTip .bottom                { height: 14px; background: url(../images/notch-green.png) top center no-repeat; }

.blueTip                    { width: 342px; }
.blueTip .content                { width: 310px; padding: 10px; border: 6px solid #36a4d9; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #90d8f0; color: #020202; }
.blueTip .bottom                { height: 14px; background: url(../images/notch-blue.png) top center no-repeat; }

.purpleTip                    { width: 342px; }
.purpleTip .content                { width: 310px; padding: 10px; border: 6px solid #8671de; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #a290f0; color: #020202; }
.purpleTip .bottom                { height: 14px; background: url(../images/notch-purple.png) top center no-repeat; }

.darkTip                    { width: 342px; }
.darkTip .content                { width: 310px; padding: 10px; border: 6px solid #303030; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #505050; color: #f8f8f8; }
.darkTip .bottom                { height: 14px; background: url(../images/notch-dark.png) top center no-repeat; }


Вот и всё. Готово.

Скачивание файлов доступно только зарегистрированным пользователям









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