Плагин 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' - привязка к центру экрана.