Сегодня мы начинаем серию статей "Украшаем 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 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.