Я учусь писать плагины под jquery. Темой своего первого плагина решил взять модальные окна.
У каждого плагина есть свои настройки! У моего пока 2. Вызов такой:
<button data-modal="#demo1">Окно</button>
<script>
$(document).on('ready', function(){
$('[data-modal]').modalUI({
position: 'center',
size: 'small'
});
});
</script>
Сам код плагина выглядит так:
;(function($, window, document, undefined) {
"use strict";
// Конструктор плагина
var ModalUI = function(trigger, userOptions){
this.trigger = $(trigger);
this.modalContainer = $($(trigger).data('modal'));
this.modal = this.modalContainer.children('.modalUI');
// Заменим настройки по умолчанию настройками пользователя
this.config = $.extend({}, $.fn.modalUI.defaults, userOptions);
this.init();
this.position(this.modal);
this.size(this.modal);
};
// Инициализация
ModalUI.prototype.init = function(){
var self = this,
modalTrigger = self.trigger,
modalID = self.modalContainer;
// Открытие окна при клике на кнопки
modalTrigger.on('click', function(event){
// Если кнопка вызова является ссылкой, то уберем переход по умолчанию
if ($(event.target).is('a')) {
event.preventDefault();
}
modalID.addClass('act');
});
};
// Позиционирование окна
ModalUI.prototype.position = function(modalID){
var self = this;
switch (self.config.position){
case 'center':
modalID.addClass('center');
break;
default:
modalID.addClass('static');
break;
}
};
// Размер окна
ModalUI.prototype.size = function(modalID){
var self = this;
switch (self.config.size){
case 'large':
modalID.addClass('large');
break;
case 'small':
modalID.addClass('small');
break;
default:
modalID.addClass('normal');
break;
}
};
$.fn.modalUI = function(userOptions){
return this.each(function(){
new ModalUI(this, userOptions);
});
};
// Зададим настройки по умолчанию.
// ===============================================================================================
$.fn.modalUI.defaults = {
size: 'normal', // String: Размер окна (normal | large | small)
position: 'static', // String: Позиционирование окна (static: по умолчанию, center: по центру окна)
};
});
init() запускает окно, тупо клик обрабатывает. А дальше 2 функции, которые обрабатывают свои настройки. И возник вопрос, как можно автоматизировать запуск всех прототипов моего конструктора? Не перечислять же их тупо!