Для тренировки делаю плагин, открывающий/закрывающий всплывающие окна.
Соответственно в нем должны быть методы: открыть окно, закрыть окно и т.д.
Эти методы должны вызываться, как внутри плагина, при совершении определенных действий, так и извне: $('#box').plugin.close() или $('#box').plugin('close');
Я перечитал все мануалы, возможные структуры плагинов.
Сейчас он реализован с помощью стандартной структуры, когда методы init
, destroy
выделены в объект methods
. Но я не понимаю, как правильно реализовать метод close
.
Я не понимаю, какие параметры ему нужно передавать, или как его вызывать, чтобы он видел переменные определенные в теле функции плагина.
Вот примерная структура:
(function( $ ){
var pop = function(element, options, callback1st, callback2nd)
{
var elem = $(element),
obj = this,
self = $(this);
var settings = $.extend({
openSpeed: '300',
closeSpeed:'300',
openAnim: 'default',
closeAnim: 'default',
method: 'default',
checkboxShow: '3',
callback1st: 'default',
callback2nd: 'default'
}, options || {} );
var mpControl = elem.find(".mpcontrol"),
mpContent = elem.find("div.mpcontent");
//логика работы
}
var methods = {
init:function() {},
close:function() {}
}
$.fn.milkpop = function( method, callback1st, callback2nd ) {
//вызываем метод или инициализируем плагин
};
})( jQuery );
Мне нужно, чтобы переменные mpControl и mpContent для конкретного экземпляра были доступны внутри метода Close()
Как правильно это реализовывать? Чтобы метод мог вызываться внутри и снаружи плагина и взаимодействовал со всеми его перменными.
Апдейт Из того, что придумал после написания поста.
-
Записать управляющие элементы в
data
, для элемента к которому применяется плагин. Дальше внутри метода вытаскивать эти объекты и работать с ними (мне не очень нравится) -
Записать управляющие объекты в массив
settings
. Передавать его в функциюClose()
, т.к. он там все равно нужен для выбора скорости и эффекта. Там считывать с него.var settings = $.extend({ controlEl: elem.find(".mpcontrol"), contentEl: elem.find("div.mpcontent") }, options || {} ); methods.close.call(elem, settings);
Уже все работает, осталось получить уверенность в том, что это правильный подход :)