Как сделать всплывающие подсказки, разбираемся с WebUI Popover

14 января 2015 Антон Кулешов 4825 0

В сегодняшней статье я хочу рассмотреть тему, которая появилась еще во время зарождения первых пользовательских интерфейсов, в частности 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
	}
});

Пример можно увидеть, перейдя по ссылке «демо» или скачав архив к этой статье. Если перейти по это ссылке – другие примеры. Можно увидеть и поиграться с настройками плагина.

В заключение хочу отменить, что плагин довольно мощный и имеет колоссальные возможности по настройке, но вместе с тем простой и понятный для «неискушенного» пользователя.

Реклама
Комментариев еще не оставлено
no_avatar