Приветствую, жители Хабра'полиса!
При разработке веб-интерфейсов, зачастую есть необходимость в использовании всплывающих (модальных) 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.… Кто еще мог придумать такое название, как не испанец (фанаты меня поймут).
Автор: vnDeveloper
