305 Одним из интересных веб-компонентов Facebook является окно модального диалога. Но этот компонент многим пользователям не нравится, потому что в нем нет оверлея, нет анимации изменения размера окна и вообще много-чего отсутствует.
На основе концепции Facebook, был создан компонент LightFace — клон лайтбокса Facebook для MooTools. LightFace и его семейство классов хорошо работает с iFrames, картинками, AJAX контентом, статичным позиционированием и статичным контентом.
Особенности LightFace
- Пять компактных классов:
LightFace,LightFace.Request,LightFace.IFrame,LightFace.ImageиLightFace.Static - Ограничение размеров изображения размерами окна
- Предоставление множества опций для настройки конкретного экземпляра класса
- Распознавание нажатия на клавиатуру
- Работа с классом MooTools Drag, который позволяет двигать
lightbox - Добавление любого количества кнопок
- Автоматическое добавление или удаление событий для снижения нагрузок на браузер
- Автоматическое изменение размеров и позиционирования при изменении размеров окна и прокрутки
- Поддержка IE6+, Safari, Chrome, Opera и iPad/iPhone
Ядро LightFace
LightFace.js является ядром LightFace. Все последующие классы лишь расширяют функционал LightFace. Создание нового лайтбокса очень просто:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Создаем экземпляр var modal = new LightFace({ height: 200, width: 300, title: 'My Profile, content: 'Lorem ipsum....' }); // Открываем modal.open(); //Контент modal.load('This is different content....'); |
LightFace очень гибко настраивается с помощью громадного множества опций:
- width — (*integer|string*, по умолчанию 'auto') Определяет ширину модального окна.
- height — (*string|string*, по умолчанию 'auto') Определяет высоту модального окна.
- draggable — (*boolean*, по умолчанию false) Возможность перетаскивать окно с помощью захвата его title (заголовок)
- title — (*string*, по умолчанию '') Заголовок окна.
- content — (*string*, по умолчанию '<p>Message not specified.</p>') Контент окна.
- buttons — (*array*, по умолчанию []) Массив, содержащий любое количество объектов кнопок.
- fadeDelay — (*integer*, по умолчанию 150) Задержка появления/исчезания оверлея.
- fadeDuration — (*integer*, по умолчанию 150) Длительность оверлея, пока загружается контент.
- keys — (*object*, по умолчанию для объекта w/ 'esc' ) Назначение клавиш для дополнительных событий пока открыто модальное окно.
- zIndex — (*integer*, по умолчанию 9001) Определяет zIndex окна.
- constrain — (*boolean*, по умолчанию false) Может ли модальное окно обрезать контент при изменении размеров окна?
- errorMessage — (*string*, по умолчанию '<p>The requested file could not be found.</p>') Сообщение об ошибке, если источник не найден.
- resetOnScroll — (*boolean*, по умолчанию true) Оставлять модальное окно на прежнем месте экрана, если пользователь скролит.
LightFace поддерживает много методов, позволяющих контролировать контент и каждый экземпляр класса LightFace:
- load (content,title?) — загружает определенный контент в lightbox
- open (fast?) — открывает lightbox
- close — закрывает lightbox
- fade — прячет при загрузке «loading» оверлея
- unfade — показывает после «loading» оверлея
- getBox — возвращает весь узел DOM, так что вы можете полностью им управлять
- addButton — добавляет кнопку в подвал lightbox
- showButton — показывает кнопку
- hideButton — прячет кнопку
LightFace.Request
LightFace.Request соединяет в себе мощь LightFace и запросов MooTools (AJAX), для загрузки контента в лайтбокс по желанию. Особенность LightFace в том, что у него есть внутренний оверлей и элегантный, а ля Facebook, индикатор, которые появляются или исчезают, когда выполняется AJAX запрос.
В LightFace есть две дополнительные опции: url и request. Опция request непосредственно перенаправляет объект во внутренний экземпляр класса LightFace.Request.
Далее пример использования:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Создаем экземпляр var modal = new LightFace.Request({ width: 400, height: 300, title: 'User Information', url: 'user.php', request: { method: 'post', data: { userID: 3 } } }); // Открываем modal.open(); // Загружаем url! modal.load('content.php','Static Content'); |
AJAX запрос выполняется при помощи url.
LightFace.Image
LightFace.Image специализируется на загрузке изображений в lightbox. Приемущество LightFace.Image в том, что лайтбокс может контролировать размеры изображения, согласно размерам модального окна. Если пользователь будет изменять размер окна, то и размер изображения тоже будет меняться.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var light = new LightFace.Image({ title: 'Image ' + (index + 1), fadeDuration: 100, fadeDelay: 400, keys: { left: function() { //загружаем предыдущее изображение if(index!= 0) this.load(images[--index],'Image ' + (index + 1)); }, right: function() { //загружаем следующее изображение if(index != images.length-1) this.load(images[++index],'Image ' + (index + 1)); }, esc: function() { this.close(); } } }); |
Если вам нужно, чтобы определенные изображения загружались в IFrame, со следующей HTML версткой:
|
1 |
<a href="large.jpg" rel="lightface"><img src="thumb.jpg" alt="My Image" title="Click for larger view" /></a> |
...вам нужно просто написать:
|
1 2 3 4 |
var modal = new LightFace.Image(); $$('a[rel="lightface"]').addEvent('click',function() { modal.load(this.get('src'),this.get('alt')); }); |
LightFace.IFrame
LightFace.IFrame предоставляет простой метод загрузки данных из IFrame. Здесь нет ничего особенного, но LightFace делает это очень элегантно.))) Пример ниже:
|
1 2 3 4 5 6 7 8 |
var modal = new LightFace.IFrame({ height:400, width:800, url: 'http://google.com', title: 'Google!' }).addButton('Close', function() { light.close(); },true).open(); |
Мы рекомендуем устанавливать фиксированные высоту и широту, когда создаете экземпляры LightFace.IFrame.
LightFace.Static
Все классы LightFace автоматически центрируют и выставляют размеры модального окна. LightFace.Static позволяет назначить абсолютное позиционирование лайтбокса, таким образом, вы можете расположить его где-угодно:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//Создаем контекстное меню var contextFace = new LightFace.Static({ title: 'Context', content: 'Hello!', width: 80, height: 100 }); //Открываем при нажатии клавиши мыши document.id('context-link').addEvent('click',function(e){ if(e) e.stop(); contextFace.open(false,e.page.x,e.page.y); }); //Закрываем если кликнули не в меню var closer = function(e) { var parent = document.id(contextFace).getParent('.lightface'); if(e.target != parent && !parent.contains(e.target)) { contextFace.close(); } }; document.id(document.body).addEvent('click',closer); |
LightFace.Static идеальный кандидат для вашего следующего контекстного меню.
