.. / jQuery: ToolTip + LightBox + ... Еще один плагин для всплывающих подсказок/окон с разным типом позиционирования

  1. jquery

Плагин jHelperMod - комбинация всплывающих подсказок в стиле традиционных тултипов и popup-окон в стиле LightBox - центрированных по размерам окна. Примеры реализации и исходный код лежат здесь

В сжатом виде после обфускатора  плагин имеет размер 3.3К  Это существенно меньше чем у большинства клонов LightBox. И уж тем более меньше если наворачивать сразу два плагина - отдельно для тултипов, отдельно для LightBox -попапов. Увы такая маразматическая тенденция сейчас наблюдается повсеместно.

За основу взят jHelperTip из замечательной подборки полуфабрикатов Kean Loong Tan Подборка отличается минимализмом и отсутствием всяких "красивостей". Это позволяет достаточно легко кастомизировать внешний вид представленных в ней плагинов и при необходимости добавить мулечки на потребу публике. К сожалению в этой подборке не предусмотрена прокладка для бага с перекрывающимися контролами для ie6  В предлагаемой модификации баг пофиксен.

API и дефолтные значения:

 
                $.fn.jHelperTip.defaults = {
                    trigger: "click",
                    source: "container", /*  container, ajax,image */
                    ttC: ".jHelperTipContainer", /* tooltip Container*/
                    dC: "#jHelperTipDataContainer", /* data Container */
                    type: "GET", /* data can be inline or CSS selector */
                    url: '',
                    data: '',
                    autoClose: 2,
                    position:'relative' /*  relative,absolute */
                };


trigger: "click" - вызов popup по клику; "hover" - вызов по наведению мышки
source: "container" - в popup передаются данные из контейнера,  "ajax" - подгрузка ajax'ом, "image" - грузится картинка
ttc: класс контейнера для popup. Может понадобится если будет использовано сразу несколько стилей. Например, для отображения картинок - один стиль, а для тултипов - другой.  Но если дизайнер в своем уме, то  это не понадобится.  Кстати внешний вид контейнера определяется в переменной "containerBody". Если использовать табличку для тени и скругленных углов - западло, можно перерисовать.

dc: конейнер данных для случая source: "container". В этом контейнере  со стилем display:none лежат данные, которые надо показать при clcik (hover)

type, data,url:  дополнительные параметры для ajax; Кроме того url используется для передачи адреса картинки, в случае source=image;

autoClose: Для различных вариантов схлопывания тултипов. Если autoClose='true', всплывающее окно выводится без кнопки "Close" и закрывается по mouseOut; если autoClose = "false" всплывающее окно сопровождается кнопкой "Close", по нажатию на которую окно будет закрыто. По умолчанию первый вариант отрабатывается по trigger: "hover", второй - по trigger: "click"

position: 'relative' - для всплывающих подсказок (привязка к положению мышки),  'absolute' - привязка к центру экрана.

  1. 2009-01-04
  2. jquery
  1. dustweb.ru/log/2008/07/17/lightbox_n_clones/ - Lightbox и его клоны
  2. plugins.jquery.com/project/Plugins/category/43 - Еще куча всяких плагинов для jQuery для реализации всплывающих окон/подсказок
  3. www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/ - 143 примера реализации всплывающих подсказок (тултипов, tooltips) с помощью AJAX, JavaScript и CSS
  4. www.gimiti.com/kltan/wordpress/ - Собрание полуфабрикатов для плагинов jQuery на сайте Kean Loong Tan (www.gimiti.com)
Go Index Test