- PVSM.RU - https://www.pvsm.ru -
Приветствую, жители Хабра'полиса!
При разработке веб-интерфейсов, зачастую есть необходимость в использовании всплывающих (модальных) popup-окон или вывода сообщений. Поисковики в топе выводят давно уже приевшиеся плагины а-ля «Colorbox» [1]. Ничего плохого о нем не скажу — но довольно часто встречается и глазам как-то поднадоело что-ли.
Душа желает чего-то нового и универсального, подходящего под любой дизайн интерфейса.
По-этому хочу представить jQuery плагин вывода сообщений в виде всплывающего окна, название которого немало известно в футбольном мире — «Messi» (MESsage SImple). И так, начнем…
<link rel="stylesheet" href="messi.min.css" />
<script src="messi.js"></script>
Простое сообщение:
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/
Нажмите здесь для печати.