От автора: в данном уроке мы с Вами рассмотрим плагин библиотеки jQuery UI – Tooltip, который позволяет очень быстро и легко украсить подсказки, образованные атрибутом title html элементов. К тому же он позволяет не только изменить дизайн подсказок, а и добавить различные анимационные эффекты в момент появления и скрытия подсказок.
Скачивание библиотеки
Итак, первым делом необходимо скачать и подключить библиотеку jQuery UI. Напомню, что скачать библиотеку можно на официальном сайте //jqueryui.com, перейдя по ссылке Download.
Далее необходимо выбрать режим скачивания, то есть либо Вы скачиваете полную версию библиотеки с полным набором виджетов функций и эффектов, либо скачиваете только то, что Вам нужно (галочками отмечаете требуемые компоненты библиотеки). Я предпочитаю лишнего не качать, поэтому для скачивания я выбрал только виджет Tooltip, полный набор эффектов и, конечно же, ядро библиотеки. Далее напомню, что Вы можете перед скачиванием выбрать цветовую схему отображаемых элементов библиотеки, для этого либо выбрать из выпадающего списка конкретный стандартный стиль, либо же можно сгенерировать цветовой стиль самому, перейдя по ссылке “design a custom theme”. После выбора цветовой схемы скачиваем библиотеку.
После скачивания библиотеки, мы получаем архив, его необходимо распаковать и скопировать нужные файлы к нам на сайт.
Установка библиотеки
Для сегодняшнего урока мы будем рассматривать следующий сайт:
Данный сайт состоит всего из одной страницы, и он очень простой. Его исходный код я показывать сейчас не буду, так как у Вас будут его исходники. Скажу, только что у каждого заголовка статей описан атрибут title, что необходимо для работы Tooltip.
Теперь после распаковки скачанной библиотеки, нам необходимо скопировать содержимое папки js в аналогичную папку нашего сайта. А также скопировать содержимое папки CSS в одноименную папку сайта (включая папку images). Также для данного урока необходима библиотека jQuery, но она идет в комплекте с jQuery UI, поэтому мы ее отдельно скачивать не будем.
Далее, необходимо подключить библиотеку jQuery и jQuery UI к тестовому сайту:
|
1 2 |
<script src="js/jquery-1.9.1.js"></script> <script src="js/jquery-ui-1.10.3.custom.js"></script> |
Далее создадим и подключим пустой файл script.js, в котором будем вести кодирование на языке JavaScript:
|
1 |
<script src="js/script.js"></script> |
Затем, необходимо подключить файл со стилями библиотеки jQuery UI:
|
1 |
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css"/> |
Установка завершена, теперь давайте заменим подсказки стандартного атрибута title на подсказки библиотеки jQuery UI.
Первое использование
Итак, переходим в файл script.js, выберем при помощи jQuery все ссылки заголовков статей и применим плагин Tooltip. Для этого добавим следующий код:
|
1 2 |
$("td.td_top a").tooltip({ }); |
Теперь давайте перейдем в браузер и посмотрим, что получилось:
Как Вы видите, виджет Tooltip, успешно отрабатывает. Теперь, аналогично, заменим стандартные подсказки у изображений:
|
1 2 |
$('img').tooltip({ }); |
Далее перейдем в браузер и обновим страницу:
Как Вы видите, опять же все работает.
Настройка виджета
Итак, первая настройка, позволит заменить стандартный контент виджета, из атрибута title, на произвольный. Данная настройка имеет название content. Давайте рассмотрим следующий участок кода:
|
1 2 3 4 5 6 7 8 9 |
$("td.td_top a").each(function() { var text = $(this).text(); text = "Тестовый сайт -> " + text; $(this).tooltip({ content:text }); }); |
Данный участок кода, добавляет к содержимому подсказки строку «Тестовый сайт -> «. Смотрите, выбираем при помощи jQuery все ссылки заголовков статей. Так как статей у нас много, значит, в выборку попадет несколько элементов. Поэтому вызываем метод each(), который создаст своего рода цикл. И внутри данного метода описываем функцию, которая выполнится для каждого элемента выборки. В теле функции мы создаем переменную text и сохраняем в ней значение атрибута title текущего элемента. Далее к значению переменной text, добавляем строку «Тестовый сайт -> «.
И, наконец, обращаемся к выбранному элементу используя this и вызываем метод tooltip, передавая ему настройку content. Обратите внимание, что настройки передаются в виде свойств объекта. Теперь давайте посмотрим, что у нас получилось:
Теперь давайте рассмотрим еще несколько настроек. Для этого добавим следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$('img').tooltip({ show:{ effect:'drop', duration:700, easing:"easeOutBounce" }, hide:{ effect:'explode', duration:500, delay:500 }, //disabled:true //items:'#id' position:{ //my:'left top', //at:'right bottom' }, tooltipClass: "my_class", open:function() { //alert('Open widget') } //track:true |
Итак, настройки виджета tooltip:
show — позволяет задать анимационный эффект, в момент появления подсказки. В свою очередь она принимает еще три параметра: effect — название анимационного эффекта; duration — продолжительность анимации в миллисекундах; delay:500 — задержка выполнения анимации, в миллисекундах; easing:»easeOutBounce» – ускорения выполнения анимационных эффектов (полный список всех вариантов easing можно посмотреть на странице //api.jqueryui.com/easings/).
hide: — аналогично ранее рассмотренному, за исключением того, что данная настройка управляет анимационными эффектами в момент скрытия подсказки;
disabled — если True — отключает виджет;
items — при помощи данной настройки можно уточнить, к какому из дочерних элементов выборки, необходимо применять виджет tooltip. Данная настройка актуальна, если у Вас в выбранном элементе содержатся дочерние элементы для которых необходимо применить виджет Tooltip. Items – принимает параметром селектор, элемента для которого должен применяться виджет;
position: — данная настройка позволяет позиционировать подсказку относительно элемента. Данная настройка принимает объект, с двумя свойствами. Первое свойство “at” – задает точку на элементе, относительно которой будет выполнено позиционирование подсказки (к примеру задаем точку на изображении, относительно, которой будет выполнено позиционирование подсказки). И второе свойство “my” – определяет точку на блоке с подсказкой, то есть точка, которая будет позиционироваться относительно точки, заданной в параметре “at”. Давайте посмотрим в браузере, как измениться позиционирование подсказки:
tooltipClass – позволяет задать имя класса, который будет добавлен к блоку с подсказкой. Данная настройка очень полезна, если Вам необходимо изменить дизайн блока с подсказкой. К примеру, классу «my_class», можно добавить очень простое правило – для тестирования:
|
1 2 3 |
.my_class { border:1px solid red !important; } |
track – если передать данной настройке значение true, то блок с подсказкой будет, как бы прилипать к курсору мыши и перемещаться вместе с ней в пределах элемента.
Помимо настроек, у виджета Tooltip есть такое понятие, как события. События срабатывают при выполнении определенных условий. Основным и наиболее полезным событием, является событие open. События дают нам возможность описать функцию, которая будет выполнена при срабатывании события. Событие Open срабатывает при показе подсказки.
Настройка внешнего вида
Изменить внешний вид блока с подсказкой, можно путем редактирования правил CSS. Первое — это задание собственного класса, используя настройку tooltipClass. Также, так как блок с подсказкой формируется библиотекой jQuery UI, значит, данная библиотека автоматически добавляет собственные классы к блоку с подсказкой. Итак, класс .ui-tooltip добавлен к блоку с подсказкой и его правила описаны в файле стилей, который мы скачали вместе с библиотекой jQuery UI. Текст подсказки также содержит класс — ui-tooltip-content, которому можно добавить правил, к примеру:
|
1 2 3 |
.ui-tooltip-content { border:1px solid red !important; } |
Давайте перейдем в браузер и посмотрим на изменения:
Как Вы видите, очень просто изменить дизайн блока с подсказкой. Вот и все, что я хотел бы Вам рассказать по данному плагину. Поэтому если Вас заинтересовал данный виджет, используйте его в своих наработках.
А сейчас давайте прощаться. Всего Вам доброго и удачного кодирования!!!
