5

Для тренировки делаю плагин, открывающий/закрывающий всплывающие окна. Соответственно в нем должны быть методы: открыть окно, закрыть окно и т.д. Эти методы должны вызываться, как внутри плагина, при совершении определенных действий, так и извне: $('#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()

Как правильно это реализовывать? Чтобы метод мог вызываться внутри и снаружи плагина и взаимодействовал со всеми его перменными.


Апдейт Из того, что придумал после написания поста.

  1. Записать управляющие элементы в data, для элемента к которому применяется плагин. Дальше внутри метода вытаскивать эти объекты и работать с ними (мне не очень нравится)

  2. Записать управляющие объекты в массив settings. Передавать его в функцию Close(), т.к. он там все равно нужен для выбора скорости и эффекта. Там считывать с него.

    var settings = $.extend({
    controlEl: elem.find(".mpcontrol"),
    contentEl: elem.find("div.mpcontent")
    }, options || {} );
    
    methods.close.call(elem, settings);
    

Уже все работает, осталось получить уверенность в том, что это правильный подход :)

5
  • > Я перечитал все мануалы, возможные структуры плагинов @Blackmore а вы не пробовали посмотреть исходный код не обусфицированного JQuery и понять как он работает с плагинами?!
    – Rules
    1 фев 2013 в 11:12
  • 1
    Не совсем понял, у меня вопрос не в том, как jQuery работает с плагинами, а в том, как наиболее правильно реализовать нужный мне функционал.
    – Blackmore
    1 фев 2013 в 11:26
  • Идея передачи контекста - не самая хорошая, так как в теории - непредсказуема (чего-то где-то может не быть или быть не то). Лучше, когда всё, что нужно передается как аргумент. Если нужны масштабные изменения передаются две структуры, входная, откуда берем данные, и выходная, В аттрибуты которой пишем.
    – SilverIce
    1 фев 2013 в 11:30
  • @Blackmore, не могли бы вы поделиться ссылками того что прочитали? (для моего собственного развития интересуюсь)
    – Viacheslav
    1 фев 2013 в 21:19
  • 1
    habrahabr.ru/post/158235 jquery.page2page.ru/index.php5/… Ну и все по запросу make jquery plugin ;-)
    – Blackmore
    1 фев 2013 в 21:31

1 ответ 1

1

Правильнее всего использовать jquery Widget Factory. Я тут сделал демонстрационный пример, как создать плагин пользуясь данной методикой, это поможет вам обойти все подводные камни:

http://codepen.io/lukas-pierce/pen/zNVgMK

(function($) {
  $.widget("custom.milkpop", {

    // параметры по умолчанию
    options: {
      bgColor: 'red', //цвет фона для ссылки открывающей модалку
      content: 'Hello world!',

      // Callbacks
      beforeShow: null,
      afterShow: null
    },

    // Конструктор
    _create: function() {
      //контекст уже содержит ссылку на jquery объект DOM-элемента
      this.element.css('background-color', this.options.bgColor);

      this._on(this.element, {
        click: "open"
      });
    },

    // public method (начинается без префикса _)
    open: function(e) {
      e.preventDefault && e.preventDefault();

      this._trigger("beforeShow");
      //заглушка, put your code for open modal here
      alert(this.options.content);
      this._trigger("afterShow");
    }

  });

})(jQuery);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.