jBox — очень многофункциональный плагин который содержит в себе такие полезные вещи как тултипы(tooltips), модальные окна(Modal windows), окна с подтверждением(Confirm windows), небольшую галерею изображений и функцию уведомлений на сайте(Notices). Плагин действительно полезный, набрел на него случайно когда искал плагин для создания красивого тултипа с произвольным содержимым. Все тонкости плагина еще не изучил, но это легко исправится в процессе написания этого мануала, думаю он будет не маленький, информации по плагину много.

Установка

Как обычно в первую очередь подключаем скрипты и стили необходимые для работы плагина

1
2
3
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://netdna.jboxcdn.com/0.3.1/jBox.min.js"></script>
<link href="http://netdna.jboxcdn.com/0.3.1/jBox.css" rel="stylesheet">

Итак, сначала кратко пройдемся по возможностям плагина, затем по каждому пункту по подробнее с примерами и в конце статьи рассмотрим все возможные настройки, события и обратные функции.

1. Тултипы(Tooltips)

Для создания тултипа со стандартными параметрами используем код:

1
$('.tooltip').jBox('Tooltip');

1
2
<span class="tooltip" title="Первый тултип">Наведи на меня!</span>
<span class="tooltip" title="Второй тултип">Наведи на меня!</span>

В этом примере тултип появится сверху при наведении на текст, позже рассмотрим варианты настроек с помощью которых можно создать сложный вариант тултипа от способа вызова(наведение, клик(click)) до динамического содержимого, анимации и т.д.

2. Модальные окна(Modal windows)

Создается модальное окно почти точно так же:

1
2
3
4
5
6
7
new jBox('Modal', {
    width: 300,
    height: 200,
    attach: $('#myModal'),
    title: 'Заголовок модального окна',
    content: '<i>Содержимое</i>'
});

1
<div id="myModal">Нажми на меня чтобы открыть модальное окно!</div>

Это конечно не супер плагин типа fancybox’a, но все равно для определенных целей весьма полезен.

3. Окна с подтверждением(Confirm windows)

Окна с подтверждением это те же модальные окна, но двумя кнопками, которое подтверждают действие пользователя или нет.

1
2
3
4
new jBox('Confirm', {
    confirmButton: 'Сделай это!',
    cancelButton: 'Отмена'
});

1
2
<div onclick="doit()" data-confirm="Вы действительно хотите это сделать?">Нажми на меня!</div>
<a href="http://stephanwagner.me" data-confirm="Вы действительно хотите перейти на страницу?">Нажми на меня!</a>

4. Уведомления(Notices)

Следующий код со стандартными настройками создаст и отобразит уведомление и автоматически через некоторое время его скроет

1
2
3
new jBox('Notice', {
    content: 'Hurray! A notice!'
});

Если кто не понял то этот код нужно прописать внутри события click по которому жмем.

5. Галерея

Так же легко как и раньше создадим галерею:

1
new jBox('Image');

1
2
3
<a href="/image1_large.jpg" title="My title 1" data-jbox-image="gallery1"><img src="/image1_small.jpg" alt=""></a>
<a href="/image2_large.jpg" title="My title 2" data-jbox-image="gallery1"><img src="/image2_small.jpg" alt=""></a>
<a href="/image3_large.jpg" title="My title 3" data-jbox-image="gallery1"><img src="/image3_small.jpg" alt=""></a>

Вот были основные 5 возможностей плагина, дальше рассмотрим разнообразные примеры вызова плагина.

Способы вызова

Вызвать плагин можно двумя способами, первый это привязать вызов к селекторы и второй это создать новый экземпляр плагина jBox:

1
2
3
$('.tooltip').jBox('Tooltip');
 
new jBox('Tooltip', {attach: $('.tooltip')});

Установка типа обязательна!! в данном примере указан тип ‘Tooltip’

Доступные типы: Tooltip, Mouse, Modal, Confirm, Notice, Image.

Тип Mouse — это тот же тултип только подсказка будет следовать за курсором.

Если мы вызываем плагин вторым способом т.е. создаем экземпляр плагина jBox то его нужно будет в дальнейшем вызвать. Сделать это можно следующим кодом:

1
2
3
4
5
var myModal = new jBox('Modal', {
    content: 'Модальное окно jBox'
});
 
myModal.open();

Привязка jBox к элементам

В плагине есть опция attach с помощью которой можно прикрепить созданный экземпляр jBox к любому элементу на странице

1
2
3
4
5
new jBox('Modal', {
    attach: $('#myModal'),
    title: 'Ура!',
    content: 'Это модальное окно'
});

1
<div id="myModal">Нажми на меня чтобы вызвать модальное окно!</div>

Тултипы обычно отображаются когда наводишь на элемент курсор мыши, но можно сделать ток чтобы тултип отображался по клику на элемент, как модальное окно, для этого предназначена опция trigger

1
2
3
$('.tooltip').jBox('Tooltip', {
    trigger: 'click'
});

1
2
<span class="tooltip" title="Tooltip 1">Click me!</span>
<span class="tooltip" title="Tooltip 2">Click me!</span>

Открытие и закрытие

Если вам нужен более точный контроль над функциями плагина то можно использовать следующие методы плагина: open(), close() или toggle()

1
var myModal = new jBox('Modal');

1
2
3
<span onclick="myModal.open();">Открыть jBox!</span>
<span onclick="myModal.close();">Закрыть jBox!</span>
<span onclick="myModal.toggle();">Открыть или закрыть jBox!</span>

Еще можно установить задержку открытия или закрытия:

1
2
3
4
$('.tooltip').jBox('Tooltip', {
    delayOpen: 500,
    delayClose: 1000
});

Содержимое

Самый просто способ задания содержимого тултипа или модального окна это передать данные в параметры title и content, можно передать напрямую при создании либо через data атрибут объекта:

1
2
3
4
$('.tooltip').jBox('Tooltip', {
    getTitle: 'data-jbox-title',
    getContent: 'data-jbox-content'
});

1
2
<span class="tooltip" data-jbox-title="jBox title 1" data-jbox-content="jBox контент 1">Наведи на меня!</span>
<span class="tooltip" data-jbox-title="jBox title 2" data-jbox-content="jBox контент 2">Наведи на меня!</span>

Если у вас большой контент который не удобно будет вписывать в data атрибуты, то намного проще будет подгрузить этот контент из другого места:

1
2
3
4
$('#myModal').jBox('Modal', {
    title: 'Загружено из тега',
    content: $('#grabMe')
});

1
<div style="display: none" id="grabMe">Это контент который отобразится в модальном окне!</div>

Для изменения контента в процессе работы плагина можно использовать методы setTitle и setContent

1
var myModal = $('#myModal').jBox('Modal');

1
myModal.setTitle('Привет').setContent('Какой-то контент...');

Так же jBox может загружать контент с помощью AJAX

1
2
3
4
5
6
7
$('#myModal').jBox('Modal', {
    ajax: {
        url: '/example.php',
        data: 'id=1',
        reload: true
    }
});

Если установлена опция reload: true то содержимое будет всегда загружаться заново

Позиционирование

С помощью функций target, position и outside jBox можно расположить в любом месте на странице, пример с тултипом:

1
2
3
4
5
6
7
8
$('.tooltip').jBox('Tooltip', {
    target: $('#anotherElement'),
    position: {
        x: 'left',
        y: 'top'
    },
    outside: 'x'
});

Если вам нужно отрегулировать положение jBox когда объект выходит за зону видимости браузера то используем следующие опции(кажется такой функционал обычно называют умным позиционированием):

1
2
3
4
$('.tooltip').jBox('Tooltip', {
    adjustPosition: true,
    adjustTracker: true
});

Указатель

Применимо для типа ‘Tooltip’ — используется для того чтобы строго указать где будет располагаться указатель(маленькая стрелочка)

1
2
3
$('.tooltip1').jBox('Tooltip', {pointer: 'left'});
$('.tooltip2').jBox('Tooltip', {pointer: 'center:-60'});
$('.tooltip3').jBox('Tooltip', {pointer: 'right:30'});

Анимация

У плагина есть возможность установки различной анимации на объекты и изменение ее скорости.

Варианты анимации: zoomIn, zoomOut, pulse, move, slide, flip, tada

1
$('#myModal').jBox('Modal', {animation: 'zoomIn'});

Так же можно установить анимацию на открытие или закрытие: {open: ‘tada’, close: ‘flip’}

Либо установить направление движения при открытии или закрытии: {open: ‘move:right’, close: ‘slide:top’}

Внимание! fadein поддерживается многими браузерами, а анимация только современными и IE не ниже 10 версии

События

Можно использовать следующие события: onInit, onCreated, onOpen, onClose, onAjax, onAjaxComplete

1
2
3
4
5
6
7
8
$('#myModal').jBox('Modal', {
    onOpen: function() {
        this.setContent('jBox открылся…');
    },
    onClose: function() {
        this.setContent('jBox закрылся…');
    }
});

Пожалуй мы рассмотрели основные возможности которых вполне достаточно для создания сложных структур, теперь рассмотрим все опции плагина.

ID

ПараметрПо умолчаниюОписание параметра
idnullСтроковое значение, позволяет самостоятельно задать id атрибут объекта, по умолчанию id создаются вида: jBoxID1, jBoxID2, …

Размеры

ПараметрПо умолчаниюОписание параметра
width, heightauto — integerШирина и высота области содержимого(не оболочки)
minWidth, minHeightauto — integerМинимальная ширина и высота области содержимого
maxWidth, maxHeightauto — integerМаксимальная ширина и высота области содержимого

Привязка jBox

ПараметрПо умолчаниюОписание параметра
attachnull — jQuery selectorУстанавливает элемент для открытия или закрытия
triggerclickОпределяет событие с котором jBox взаимодействует с элементом, варианты: click, mouseenter
preventDefaultfalseЕсли true то предотвращает переход по ссылке если на нее привязан jBox

Содержимое

ПараметрПо умолчаниюОписание параметра
titlenull — stringУстановить заголовок
contentnull — string, jQuery selectorУстанавливает содержимое, задать можно явно либо указав другой селектор с содержимым
getTitlenull — stringАтрибут из которого нужно получить заголовок
getContentnull — stringАтрибут из которого нужно получить содержимое

AJAX

ПараметрПо умолчаниюОписание параметра
1
2
3
4
5
6
7
8
9
ajax: {
    url: null,
    data: '',

    reload: false,
    getData: 'data-ajax',
    setContent: true,
    spinner: true
}
При выполнении делает AJAX запрос к url и выводит полученный результат в jBox
urlnull — stringurl — адрес для отправки AJAX запроса
data» — stringПередаваемые данные, например id=342
reloadfalseЕсли true то при каждом открытии всегда будет выполнятся AJAX запрос
getDatadata-ajaxАтрибут из которого будут браться данные, например data-ajax=»id=82&limit=10″
setContenttrueОтвет полученные в результате AJAX запроса автоматически будет вставлен как содержимое
spinnertrueСкрывает текущее содержание и отображает загрузчик при AJAX запросе

Позиционирование

ПараметрПо умолчаниюОписание параметра
targetnull — jQuery selectorУказывает в каком элементе будет отображен jBox
position{x: ‘center’, y: ‘center’}Задает позицию горизонталь: ‘left’, ‘right’, ‘center’ или число. И по вертикале: ‘top’, ‘bottom’, ‘center’ или число
outsidenullПеремещение jBox за пределы объекта, возможны варианты: ‘x’, ‘y’, или ‘xy’
offset0Смещение конечной позиции, например: {x: 15, y: -10}
attributes{ x: ‘left’, y: ‘top’ }Указать какие атрибуты использовать для позиционирования
adjustPositionfalseРегулирует положение когда jBox начинает не хватать места в зоне видимости, варианты: false, true, ‘flip’ или ‘move’
adjustTrackerfalseРегулирует положение jBox при прокрутке или изменении размера окна(‘scroll’, ‘resize’ или true — оба варианта), влияет на производительность, использовать осторожно
adjustDistance5При каком расстоянии от краев окна браузера начать регулировать свое положение, например: {bottom: 5, top: 50, left: 5, right: 20}
fixedfalseЗадать фиксированную позицию а не абсолютную
repositionfalseПересчитывает положение когда браузер меняет размер

Указатель

ПараметрПо умолчаниюОписание параметра
pointerfalseОпция отвечает за положение указателя на объект, по умолчанию отображается по центру, варианты: ‘top’, ‘bottom’, ‘left’, ‘right’ или ‘left:30’ и т.д.
pointTo‘target’Направление в которое указывает указатель, варианты: ‘top’, ‘bottom’, ‘left’, ‘right’ или ‘target’

Анимация

ПараметрПо умолчаниюОписание параметра
fade180 — integerСкорость анимации, 0 или false отключит анимацию
animationnullАнимация при открытии или закрытии jBox, данные указываются в виде объекта, например: {open: ‘tada’, close: ‘flip’}, либо можно указать направление движения: {open: ‘move:right’, close: ‘slide:top’}

Внешний вид

ПараметрПо умолчаниюОписание параметра
theme‘Default’ — stringГотовые темы которые идут в комплекте с плагином, возможны варианты: ModalBorder, NoticeBorder, TooltipBorder, TooltipDark, не забудьте подключить CSS файлы
addClass» — stringПользовательский класс для обертки
overlayfalseДобавление оверлея когда jBox открыт
zIndex10000 — integerПозиция по оси z

Задержка

ПараметрПо умолчаниюОписание параметра
delayOpen0 — integerЗадержка перед открытием в миллисекундах
delayClose0 — integerЗадержка перед закрытием в миллисекундах

Закрытие jBox

ПараметрПо умолчаниюОписание параметра
closeOnEscfalseРазрешить закрытие jBox при нажатии клавиши [ESC]
closeOnClickfalseПо умолчанию jBox закрывается при нажатии в любом месте, но с помощью этой опции закрытие можно настроить более точно, возможны варианты: ‘true’ (в любом месте), ‘box’ (клик в jBox), ‘overlay‘ (клик по оверлею), ‘body’ (клик везде кроме jBox)
closeOnMouseleavefalseЗакрыть jBox когда курсор покидает элемент jBox
closeButtonfalseДобавляет кнопку закрытия, возможны варианты: box, title, overlay, работает в связке с closeOnClick

Другие опции

ПараметрПо умолчаниюОписание параметра
constructOnInitfalseСоздает jBox когда он инициализируется или открывается впервые
blockScrollfalseОтключает скролл когда jBox открыт
appendTojQuery(‘body’)Указывает в каком месте будет создан элемент jBox
draggablenullДелает jBox перемещаемым по странице, варианты: ‘true’, ‘title’ или jQuery селектор
dragOvertrueЕсли на странице присутствует несколько перемещаемых элементов, то тот который вы выберите будет всегда по верх остальных

События

ПараметрПо умолчаниюОписание параметра
onInitfunction() {}Срабатывает когда jBox инициализируется
onCreatedfunction() {}Срабатывает когда jBox создался и доступен в DOM
onOpenfunction() {}Срабатывает когда jBox открылся
onClosefunction() {}Срабатывает когда jBox закрывается
onCloseCompletefunction() {}Срабатывает когда jBox закрытие завершено

Дополнительные настройки для типа Подтверждение(Confirm)

ПараметрПо умолчаниюОписание параметра
confirmButton‘Submit’Текст на кнопке подтверждения
cancelButton‘Cancel’Текст на кнопке отмены

Дополнительные настройки для типа Уведомлений(Notice)

ПараметрПо умолчаниюОписание параметра
autoClose7000Время в миллисекундах когда уведомление автоматически закроется, 0 или false для отключения опции
colornullУстанавливает цвет фона для уведомлений, варианты: ‘black’, ‘red’, ‘green’, ‘blue’, ‘yellow’
stacktrueОчередь уведомлений
audiofalseurl адрес звукового файла когда уведомление открылось, доступные файлы: .mp3 и .ogg
volume100громкость звука, от 0 до 100

Дополнительные настройки для типа Галерея

ПараметрПо умолчаниюОписание параметра
src‘href’Атрибут из которого будет получен адрес изображения
gallery‘data-jbox-image’Атрибут по которому будет проверятся привязанность конкретного изображения к отдельной галереи
imageLabel‘title’Атрибут из которого будет получено описание изображения
imageFade600Длительность анимации между сменой изображений
imageSize‘cover’Способ отображения изображения, используется свойство CSS background-position

Методы jBox

Самый просто вариант использования методов:

1
2
3
4
5
var myModal = new jBox('Modal');
 
myModal.setTitle('Мой заголовок');
myModal.setContent('Мой контент');
myModal.open();

Открытие и закрытие

ПараметрПо умолчаниюОписание параметра
.open(options)Только открывает jBox
.close(options)Только закрывает jBox
.toggle(options)открывает и закрывает jBox

Привязка jBox

ПараметрПо умолчаниюОписание параметра
.attach(elements)Если правильно я понял, то этот метод позволяет открыть внутри jBox другой контент
.detach(elements)Удаляет открытые и закрытые экземпляры jBox

Содержимое

Устанавливает контент для jBox, можно указывать jQuery селектор, если вторым параметром передать значение true то размеры jBox будут перечитаны
ПараметрПо умолчаниюОписание параметра
.setTitle(title)Устанавливает заголовок jBox, если вторым параметром передать значение true то размеры jBox будут перечитаны
.setContent(content)
.ajax(options)про AJAX писали ранее, здесь точно так же

Аудио

ПараметрПо умолчаниюОписание параметра
.audio(options)Проигрывает аудио файл. Передается два параметра url путь к файлу и громкость, пример: {url: ‘/path/filename’, volume: 75}, если расширение файла не указано то будут найдены файлы расширения .mp3 и .ogg

Позиционирование

ПараметрПо умолчаниюОписание параметра
.position(options)Пересчитывает позицию jBox

Отключение и включение

ПараметрПо умолчаниюОписание параметра
.disable()Отключает jBox, вы не сможете потом закрыть или открыть его пока не включите
.enable()Включает jBox

Уничтожение jBox

ПараметрПо умолчаниюОписание параметра
.destroy()Полностью уничтожает и удаляет все созданные теги со страницы

Вот и все! Статья получилась большой) Ниже ссылки на демо и скачать.

Возможно вас это заинтересует