Велосипед подсказок своими руками

10 Май
2012

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

Для начала создадим html файл, назовем его index.html. В данный файл мы поместим каркас нашего примера.

<html>

	<head>

		<title>jQuery tips example</title>

		<link type="text/css" rel="stylesheet" href="style.css" />

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

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

	</head>

	<body>

		<div id="tips-box">

			<h3 rel="Подсказка 1">Пример 1</h3>

			<h3 rel="Подсказка 2">Пример 2</h3>

			<h3 rel="Подсказка 3">Пример 3</h3>

		</div>

	</body>

</html>




В данном примере мы будем показывать подсказки для заголовков третьего уровня, то есть html тега h3. Сразу подключаем еще не созданные файлы стилей, а также требуемые файлы со скриптами. Библиотеку jQuery можно скачать со страницы официального сайта. В файле jquery.jsTips.js и будет располагаться текст плагина. Хочу обратить внимание, что все файлы создаются с помощью текстового редактора Notepad++ в кодировке UTF-8 non BOM.
Далее нам необходимо определить стили оформления, для этого в файле style.css напишем следующее:

#tips-box			{

	width: 500px;

	height: 500px;

	margin: auto;

	border: solid 1px #ccc;

	padding: 10px;

}


В результате данных махинаций должно получиться следующее:

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

$(document).ready(function()	{

	$.fn.jsTips = function($options)	{

	}

});


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

$options = $.extend({

fontColor: 'black',

backgroundColor: 'white'

}, $options);


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

.tip				{

	float: left;

	padding: 5px;

	height: 20px;

	line-height: 20px;

	font-family: Tahoma;

	font-size: 12px;

	color: black;

	background-color: white;

	border: solid 1px #ccc;

	position: absolute;

	display: none;

}


Теперь осталось только подготовить html код самого контейнера и код для вывода этого самого контейнера. Пропишем в коде нашего плагина следующее:

$(document).ready(function()	{

	$.fn.jsTips = function($options)	{

		$options = $.extend({

			color: 			'black',

			background:		'white'

		}, $options);

		$box = $('<div>', {

			'class': 'tip'

		});

		$(this).hover(function()	{

			$x = $(this).offset().left;

			$y = $(this).offset().top;

			$('body').append($box);

			$tip = $(this).attr('rel');

			$('.tip').html($tip)

				.css('top', $y + $(this).height())

				.css('left', $x + 20)

				.css('color', $options.color)

				.css('background-color', $options.background)

				.fadeIn();

		}, function()	{

			$('.tip').hide()

				.detach();

		});

	}

});

Все, теперь Наш плагин готов к употреблению. Теперь его можно и подключить к файлу, для этого в Наш файл index.html добавим кусочек кода:

		<script type="text/javascript">

			$(document).ready(function()	{

				$("h3").jsTips({

					'color': 'red',

					'background': 'lime'

				});

			});

		</script>


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

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



загрузка...

Комментарии:

Наверх