jBox - уникальный плагин подсказок, уведомлений, модальных окон и галереи на jQuery
|
1 2 3 4 5 6 |
<link rel="stylesheet" type="text/css" href="/css/jBox.css"> <script type='text/javascript' src="/js/jBox.min.js"></script> <link rel="stylesheet" type="text/css" href="/css/ModalBorder.css"> <link rel="stylesheet" type="text/css" href="/css/NoticeBorder.css"> <link rel="stylesheet" type="text/css" href="/css/TooltipBorder.css"> <link rel="stylesheet" type="text/css" href="/css/TooltipDark.css"> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<a href="#" class="apotitle2" newcontent="Перейти на APO-UCOZ: <a href='http://apo-ucoz.com' target='blank'>Клик</a>" newtitle="Заголовок из тег newtitle">Использование опций</a> <script> $('.apotitle2').jBox('Tooltip', { id: 'apoid', // Уникальный ID блока с подсказкой width: 300, // Фиксированная ширина подсказки height: 100, // Фиксированная высота подсказки maxWidth: 400, // Максимальная ширина подсказки maxHeight: 150, // Максимальная высота подсказки trigger: 'click', // Открывать при клике или наведении (click, mouseenter) preventDefault: 1, // Запрет взаимодействия со ссылками внутри подсказки title: 'Это заголовок подсказки, если не указан атрибут, из которого брать содержимое', content: 'Это текст на тот случай, если не указан атрибут, из которого брать содержимое', getTitle: 'newtitle', // Из какого атрибута брать заголовок для подсказки getContent: 'newcontent', // Из какого атрибута брать текст для подсказки target: $('.apotitle2'), // Для какого элемента вывести подсказку position: { x: 'right', // Позиция вывода по оси x (left, right, middle) y: 'bottom', // Позиция вывода по оси y (top, bottom, middle) }, offset: { x: 10, // Сдвиг подсказки по оси x y: -5 // Сдвиг подсказки по оси y }, fixed: 0, // Фиксированная или статичная подсказка (0, 1) reposition: 0, // Перестраивать позицию подсказки при изменении размера экрана (0, 1) repositionOnOpen: 0, // Перестраивать позицию подсказки при первом открытии (0, 1) repositionOnContent: 0, // Перестраивать позицию подсказки при изменении содержимого подсказки (0, 1) fade: 1, // Использовать ли эффект плавного появления и угасания (0, 1) animation: 'flip', // Тип анимации (zoomIn, zoomOut, pulse, move, slide, flip, tada) theme: 'TooltipBorder', // Цветовая схема подсказки (ModalBorder, NoticeBorder, TooltipBorder, TooltipDark) addClass: 'newclass', // Добавление своего класса к подсказке overlay: 0, // Добавление оверлея к подсказке (0, 1) zIndex: 999, // Указываем свой z-index (0, 9999999999...) delayOpen: 500, // Задержка перед открытием delayClose: 1000, // Задержка перед закрытием closeOnEsc: 1, // Закрывать ли при нажатии клавиши ECS closeOnClick: true, // При каком событии закрывать подсказку (overlay - клик по оверлею, box - по самой подсказке, body - клик где угодно, кроме самой подсказки, true - клик в любом месте на странице closeOnMouseleave: 0, // Закытие при отводе курсора с подсказки (0, 1) closeButton: 'box', // Тип закрытия (box - кнопка, title - по заголовку, overlay - по оверлею) constructOnInit: 0, // Формировать код при инициализации (0, 1) blockScroll: 1, // Убирать прокрутку body при вызове подсказки (0, 1) draggable: 'title', // Возможность перемещать (0, 1, title - за заголовок, jQuery selector - указать свой jQuery объект ($('.class')) dragOver: 1, // Если есть другие перемещаемые объекты - отодвигать их onInit: function() { console.log('Подсказка инициализирована'); // Событие при инициализации }, onCreated: function() { console.log('Подсказка создана в body'); // Событие при формировании html кода подсказки }, onOpen: function() { console.log('Подсказка открыта'); // Событие при открытии подсказки }, onClose: function() { console.log('Подсказка закрывается'); // Событие перед закрытием подсказки }, onCloseComplete: function() { console.log('Подсказка полностью закрыта'); // Событие при полном закрытии подсказки } }); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> new jBox('Notice', { content: 'Расширенное использование', // Вы можете использовать почти все опции, что перечислены для Tooltip элемента выше width: 300, // Ширина height: 100, // Высота animation: 'tada', // Тип анимации autoClose: 5000, // Автозакрытие через 5 сек (0 - 999999, false) color: 'red', // Цвет подсказки (black, red, green, blue, yellow) stack: 1, // Выстраивать подсказки друг под другом или нет (0, 1) audio: 'https://imapo.ru/css/bling1', // Ссылка на аудиофайл (Залейте в mp3 и ogg форматах) volume: 17 // Громкость звука (0 - 100) }); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script> var apoModal2 = new jBox('Modal', { // Можно использовать почти все опции Tooltip draggable: 'title', // Возможность перемещать (0, 1, title - за заголовок, jQuery selector - указать свой jQuery объект ($('.class')) title: 'Заголовок модального окна', // Заголовок content: 'Расширенное использование использование', // Можно использовать почти все опции Tooltip blockScroll: 0 // Не убираем прокрутку body }); apoModal2.setWidth(500); // Задать ширину окна apoModal2.setHeight(200); // Задать высоту окна apoModal2.setTitle('Новый титульник'); // Новый заголовок apoModal2.setContent('Новый контент'); // Новый контент apoModal2.open(); // Открытие окна apoModal2.audio({ url: 'https://imapo.ru/css/bling1' // Подключение звука }); // apoModal2.close() - Закрытие окна // apoModal2.toggle() - Если закрыто - откроет окно и наоборот // apoModal2.disable() - Отключить окно // apoModal2.enable() - Активировать окно // apoModal2.destroy() - Удалиить окно </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<a href="#" id="apoconfirm">Использование окон-подтверждалок</a> <script> new jBox('Confirm', { // Можно использовать почти все опции Tooltip blockScroll: 0, // Не убираем прокрутку body content: 'Нравится jBox?', // Текст вопроса confirmButton: 'Да', // Текст кнопки "Да" cancelButton: 'Неа', // Текст кнопки "Нет" attach: $('#apoconfirm'), // При клике по какому элементу открывать confirm: function() { alert('Здорово! Я тоже от них в восторге!'); // Функция при клике по "Да" }, cancel: function() { alert('Жаль. Плагин здоровский...'); // Функция при клике по "Нет" } }); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<a href="https://imapo.ru/img/x_d2a6ad91.jpg" title="My title 1" data-jbox-image="gallery1"><img src="https://imapo.ru/img/x_d2a6ad91.jpg"></a> <a href="https://imapo.ru/img/x_eefc1cea.jpg" title="My title 2" data-jbox-image="gallery1"><img src="https://imapo.ru/img/x_eefc1cea.jpg" alt=""></a> <a href="https://imapo.ru/img/x_f55b7b4d.jpg" title="My title 3" data-jbox-image="gallery1"><img src="https://imapo.ru/img/x_f55b7b4d.jpg" alt=""></a> <script> new jBox('Image', { src: 'href', // С какого атрибута брать ссылку на картинку (href) gallery: 'data-jbox-image', // Какой класс должен быть у ссылок на картинки (data-jbox-image) imageLabel: 'title', // Из какого атрибута брать описание (title) imageFade: 500, // Скорость плавной смены картинок imageSize: 'cover' // Тип масштабирования картинки при увеличении (cover, contain, auto, число) }) </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
