Еще один вид подсказок на jQuery

В этом уроке я расскажу о еще одном виде подсказок на jQuery.
Здесь в качестве подсказки может быть текст, картинка, список и др. В создании таких подсказок нам поможет плагин для jQuery, который называется Easy Tooltip 1.0

demosourse

Шаг 1.

Подключим фреймворк jQuery и плагин Easy Tooltip 1.0 к нашему документу, прописав следующий код между тегами <head>:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tooltip.js"></script>

Шаг 2.

Далее пропишем следующий скрипт:

<script type="text/javascript">
	$(document).ready(function(){	
		$("a#link").easyTooltip({
			useElement: "item"				   
		});
	});
</script>

Шаг 3.

В отдельный CSS-файл или между тегами <head> пропишем стили, отвечающие за внешний вид подсказок. Вы можете отредактировать эти стили по своему желанию.

#easyTooltip{

margin:0 10px 1em 0;

width:250px;

padding:8px;

background:#fcfcfc;

border:1px solid #e1e1e1;

line-height:130%; 

}

#easyTooltip h3{

margin:0 0 .5em 0;

font:13px Arial, Helvetica, sans-serif;

text-transform:uppercase;

} 

#easyTooltip p{

margin:0 0 .5em 0;

} 

#easyTooltip img{

background:#fff;

padding:1px;

border:1px solid #e1e1e1;

float:left;

margin-right:10px;

} 

#item{display:none;}

В нужном нам месте на странице пропишем ссылку и дадим ей идентификатор link. Например:

Наведите мышкой <a href="http://ruseller.com/" id="link">сюда</a>

Создадим блок с идентификатором item, в который впишем текст непосредственно самой подсказки (по желанию сюда можно вставить картинку, список, или что то еще). Т.е. у Вас должно получиться примерно так:

<div id="item">

<h3>Ruseller.com</h3>

<img src="image.gif" />

<p>Текст</p>

</div>

Вот и все! Оригинальные и функциональные подсказки для ссылок готовы!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.cssglobe.com
Перевел: Сергей Патин
Урок создан: 18 Мая 2009
Просмотров: 40677
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^