Украшаем Cotonti: Tooltips

Tooltips или подсказки являются одним из интересных приемов, способствующих улучшению юзабилити сайта

Tooltips в шаблоне Котонти

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

1. Внедряем jQuery tinyTips Plugin в CMF Cotonti

tinyTips — это компактный jQuery плагин, позволяющий создавать подсказки для ссылок, используемых в HTML-коде. Установка tinyTips предельна проста. Прежде всего нам необходимо скачать стабильную версию плагина tinyTips с сайта разработчика. Распакуем архив и скопируем файл jquery.tinyTips.js в удобное для вас место, например в каталог js вашего скина Cotonti.

Подключение плагина — дело нескольких строк в header.tpl:

<script type="text/javascript" src="skins/{PHP.skin}/js/jquery.tinyTips.js"></script> 
<script type="text/javascript">
	$(document).ready(function() {
		$('a.tooltip').tinyTips('title');
	});
</script>

Все понятно: в качестве подсказок будут использоваться свойства title анкеров с классом tooltip.

2. Оформляем jQuery в шаблонах Cotonti

Для корректного отображения подсказок нам понадобится подключить стили и графику с фонами. Начнем с CSS-стилей. Включим их в общий CSS-файл директивой @import:

@import url("tinytips.css");

В файле tinytips.css определим следующие стили:

.tinyTip		{ width:200px; padding:12px 0 0; display:block; background:url(img/tooltips/top.png) no-repeat 0 0; }
.tinyTip .content	{ padding:0 20px; color:#111; background:url(img/tooltips/content.png) repeat-y 0 0; word-wrap:wrap; }
.tinyTip .bottom	{ height:22px; background:url(img/tooltips/bottom.png) no-repeat 0 0; font:0/0 sans-serif; }

Осталось только распаковать в каталог img/tooltips/ архив с фонами для подсказок.

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

К посту «Украшаем Cotonti: Tooltips» комментариев пока нет

Новый комментарий

Для редактирования комментария осталось 10 минут