Автор

02 04.2013
Cтильные подсказки для сайта

Cтильные подсказки для сайта


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

<script type="text/javascript" src="http://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; }

 

На этом наши подсказки готовы, можно просмотреть как они выглядят в демо или скачать уже готовый материал.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

19 04.2013
Cтильные подсказки для сайта

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


28 11.2014
Cтильные подсказки для сайта

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


26 01.2018
Cтильные подсказки для сайта

Красивый сайт остается в памяти посетителя очень долго, и это несомненно прекрасно. Сегодня мы бы хотели поговорить об замечательный заглушке на ваш сайт...


19 04.2013
Cтильные подсказки для сайта

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close