В сегодняшней статье я хочу рассмотреть тему, которая появилась еще во время зарождения первых пользовательских интерфейсов, в частности Windows 3.11 (если кто помнит), и прочно закрепилась во всех приложениях, нацеленных на работу с пользователем – всплывающие подсказки.
Действительно, сегодня ни одна программа не обходится без всплывающих окон с поясняющим текстом, веб-приложения и страницы сайта – не исключение. Дизайн страницы не всегда позволяет разместить на кнопке или, скажем, пункте меню всю необходимую информацию: излишне длинные надписи просто разрушат всю HTML-разметку, с этим мы и боремся, используя всплывающие подсказки. Согласитесь, никто не станет читать ваш блог или пользоваться сервисом, если вы не предоставите ему удобный и понятный интерфейс.
Сегодня в сети можно найти большое количество реализованных с помощью jQuery библиотек tooltip, мы же с вами рассмотрим одну, на мой взгляд, самую простою и удачную реализацию данного плагина. Называется она WebUI Popover и живет она здесь - WebUI Popover.
Скачиваем, закидываем на сайт и подключаем к нашему документу - всего 5 минут времени и пока 3 строчки кода:
<link href="jquery.webui-popover.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.webui-popover.min.js" type="text/javascript"></script>
Как видим, стили CSS у нас уже прописаны авторами плагина, свои стили можно переназначить в настройках плагина - об этом ниже.
Далее прикручиваем наш скрипт к нужному элементу:
$("#testButton").webuiPopover(options);
Здесь #testButton – id элемента, при наведении на который, хотим вызвать подсказку. Также можно использовать как класс, так и просто тег. Последнее неудобно, я думаю, сами понимаете почему. Вместо «options» перечисляем необходимые настройки – они ниже. Важно! Должна быть указана хотя бы одна настройка – иначе работать ничего не будет.
Теперь по настройкам. Оригинальную версию мануала смотрим тут - WebUI Popover options.
- placement - отвечает за позиционирование всплывающей подсказки относительно базового элемента. Свойство может принимать одно из следующих значений: auto, top, right, bottom, left, top-right, top-left, bottom-right, bottom-left. По умолчанию скрипт будет пытаться угадать более лаконичное расположение подсказки, чаще всего это ему удается. По крайней мере, окошко не появится за пределами видимой пользователем области;
- width – указываем ширину нашего окошка в пикселях (просто число без размерности: 300, 400 и т.п);
- height – высота, аналогично ширине;
- trigger – выбираем режим появления подсказки. Всего два варианта: «click» – сработает при клике мышью, и «hover» – при наведении курсора;
- style – по умолчанию получаем светлое окошко. Можно указать значение «inverse», тогда увидим темное окошко. Также можно прописать свои стили. Для этого создаем в CSS файле плагина класс с названием webui-popover-«название», а параметру передаем «название»;
- constrains – вспомогательная настройка позиционирования, используется, только если placement указано как «auto». Имеет два параметра: «horizontal» – подсказка будет выводиться по горизонтали, «vertical» – по вертикали;
- delay – свойство отвечает за время появления (show) и исчезновения(hide) всплывающей подсказки, время задается в миллисекундах, либо null – мгновенно. Работает только если у trigger задано значение «hover»;
- async - опция для продвинутых пользователей. Плагин имеет встроенный ajax обработчик и может работать с пользовательскими функциями. При выборе метода «Before» функция отработает до отправки данных на сервер, «success» – оперируем с полученными данными с сервера;
- cache - отвечает за хранение данных в кэше, ели выставить значение «false» подсказка будет каждый раз создаваться заново;
- multi – запрещаем или разрешаем («true») показ сразу нескольких окошек;
- arrow – показываем стрелочку, «false» – не показываем;
- title – прописываем название всплывающей подсказки, если оставим пустым, то область под заголовок отрисовываться не будет;
- content – собственно, то ради чего и стараемся – вводим текст подсказки;
- closeable – поставим значение «true» и у окошка подсказки появится крестик для его закрытия;
- padding – задает отступ у контента, при значении «false» отступы пропадут;
- type – выбираем тип выводимых данных. Принимает значения «html» – по умолчанию, «inframe» и «async» – для вывода медиаконтента и пользовательских функций;
- url – указываем адрес, если грузим данные с других источников.
Пример использования:
HTML:
<div id="testButton">Наведи на меня</div>
jQuery:
$("#testButton").webuiPopover({
placement: "top",
title: "Заголовок",
content: "<a href='http://falbar.ru/' target='_blank'>falbar.ru</a>",
trigger: "hover",
delay: {
show: 1,
hide: 300
}
});
Пример можно увидеть, перейдя по ссылке «демо» или скачав архив к этой статье. Если перейти по это ссылке – другие примеры. Можно увидеть и поиграться с настройками плагина.
В заключение хочу отменить, что плагин довольно мощный и имеет колоссальные возможности по настройке, но вместе с тем простой и понятный для «неискушенного» пользователя.