lf

LightFace: Facebook Lightbox для MooTools

Одним из интересных веб-компонентов 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. Создание нового лайтбокса очень просто:

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.
Далее пример использования:

AJAX запрос выполняется при помощи url.

LightFace.Image

LightFace.Image специализируется на загрузке изображений в lightbox. Приемущество LightFace.Image в том, что лайтбокс может контролировать размеры изображения, согласно размерам модального окна. Если пользователь будет изменять размер окна, то и размер изображения тоже будет меняться.

Если вам нужно, чтобы определенные изображения загружались в IFrame, со следующей HTML версткой:

...вам нужно просто написать:

LightFace.IFrame

LightFace.IFrame предоставляет простой метод загрузки данных из IFrame. Здесь нет ничего особенного, но LightFace делает это очень элегантно.))) Пример ниже:

Мы рекомендуем устанавливать фиксированные высоту и широту, когда создаете экземпляры LightFace.IFrame.

LightFace.Static

Все классы LightFace автоматически центрируют и выставляют размеры модального окна. LightFace.Static позволяет назначить абсолютное позиционирование лайтбокса, таким образом, вы можете расположить его где-угодно:

LightFace.Static идеальный кандидат для вашего следующего контекстного меню.


Оставить комментарий