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

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

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



Душа желает чего-то нового и универсального, подходящего под любой дизайн интерфейса.
По-этому хочу представить 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/.

Github: https://github.com/marcosesperon/Messi.

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

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