- PVSM.RU - https://www.pvsm.ru -

Messi — «не футбольный» jQuery плагин всплывающих окон

Приветствую, жители Хабра'полиса!

При разработке веб-интерфейсов, зачастую есть необходимость в использовании всплывающих (модальных) popup-окон или вывода сообщений. Поисковики в топе выводят давно уже приевшиеся плагины а-ля «Colorbox» [1]. Ничего плохого о нем не скажу — но довольно часто встречается и глазам как-то поднадоело что-ли.

image

Душа желает чего-то нового и универсального, подходящего под любой дизайн интерфейса.
По-этому хочу представить jQuery плагин вывода сообщений в виде всплывающего окна, название которого немало известно в футбольном мире — «Messi» (MESsage SImple). И так, начнем…

1. Установка плагина:

  • Подключаем библиотеку jQuery;
  • Скачиваем плагин Messi с репозитория Github;
  • Копируем файлы: messi.css и messi.js в папку с проектом;
  • Подключаем стили и скрипт к проекту:
<link rel="stylesheet" href="messi.min.css" />
<script src="messi.js"></script>

2. Опции плагина:

  • «autoclose» — Закрывать окно после 'x' миллисекунд. По умолчанию: null
  • «buttons» — Массив кнопок, которые будут в футере окна, например: [{id: 'ok', label: 'OK', val: 'OK', btnClass: ''}]. По умолчанию: []
  • «callback» — Вызов функции после закрытия окна. По умолчанию: null
  • «center» — Выровнять окно по центру экрана. По умолчанию: true
  • «closeButton» — Показывать кнопку «Закрыть» в хеадере окна. По умолчанию: true
  • «height» — Высота блока с контентом. По умолчанию: 'auto'
  • «title» — Заголовок окна. По умолчанию: null
  • «titleClass» — Класс заголовка окна: info, warning, success, error, anim. По умолчанию: null
  • «modal» — Режим модального окна (загрузка дополнительного слоя — затемнения). По умолчанию: false
  • «modalOpacity» — Прозрачность затемнения (только в модальном режиме). По умолчанию: .2
  • «padding» — Внутренние отступы в блоке контента. По умолчанию: '10px'
  • «show» — Показывать окно после загрузки. По умолчанию: true
  • «unload» — Выгрузить плагин с DOM, после закрытия окна. По умолчанию: true
  • «viewport» — Установка позиции окна (если не установлена опция «center»). Например: {top: '0px', left: '0px'}
  • «width» — Ширина окна. По умолчанию: '500px'
  • «zIndex» — Свойство CSS: z-index. По умолчанию: 99999

3. Использование плагина:

Простое сообщение:

new Messi('This is a message with Messi.');

Сообщение с заголовком:

new Messi('This is a message with Messi.', {title: 'Title'});

Сообщение в модальном режиме:

new Messi('This is a message with Messi in modal view. Now you can't interact with other elements in the page until close this.', {title: 'Modal Window', modal: true});

Сообщение произвольным позиционированием:

new Messi('This is a message with Messi in absolute position.', {center: false, viewport: {top: '760px', left: '0px'}});

Сообщение с кнопками:

new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Close', val: 'X'}]});

Сообщение с кнопками (yes/no) вызовом функции:

new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Yes', val: 'Y'}, {id: 1, label: 'No', val: 'N'}], callback: function(val) { alert('Your selection: ' + val); }});

Сообщение с кнопками (yes/no/cancel) + классы кнопок:

new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Yes', val: 'Y', btnClass: 'btn-success'}, {id: 1, label: 'No', val: 'N', btnClass: 'btn-danger'}, {id: 2, label: 'Cancel', val: 'C'}]});

Заголовок: Success:

new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'success', buttons: [{id: 0, label: 'Close', val: 'X'}]});

Заголовок: Info:

new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'info', buttons: [{id: 0, label: 'Close', val: 'X'}]});

Заголовок: Error (animated):

new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'anim error', buttons: [{id: 0, label: 'Close', val: 'X'}]});

Заголовок: Warning (animated):

new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'anim warning', buttons: [{id: 0, label: 'Close', val: 'X'}]});

Использование Messi.alert():

Messi.alert('This is an alert with Messi.');

Использование Messi.ask():

Messi.ask('This is a question with Messi. Do you like it?', function(val) { alert('Your selection: ' + val); });

Использование Messi.load():

Messi.load('ajax.html');

Использование Messi.img():

Messi.img('messi.jpg');

Демо: http://marcosesperon.es/apps/messi/ [2].

Github: https://github.com/marcosesperon/Messi [3].

Стили кнопок: http://twitter.github.com/bootstrap/ [4].

P.S.… Кто еще мог придумать такое название, как не испанец (фанаты меня поймут).

Автор: vnDeveloper


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/16017

Ссылки в тексте:

[1] «Colorbox»: http://www.jacklmoore.com/colorbox

[2] http://marcosesperon.es/apps/messi/: http://marcosesperon.es/apps/messi/

[3] https://github.com/marcosesperon/Messi: https://github.com/marcosesperon/Messi

[4] http://twitter.github.com/bootstrap/: http://twitter.github.com/bootstrap/