Создание настраиваемого события плагина в jQuery

Question

Я работаю над плагином jQuery под названием popup. Это мой первый плагин jQuery, поэтому я стараюсь следовать учебному курсу на jQuery-сайте. Я хочу реализовать что-то, чего я не нашел в их ссылке: событие onOkay(function(e){ });. Я хочу, чтобы разработчик, чтобы иметь возможность вызвать этот обработчик события так:

$("#message").popup().onOkay(function(e) { 
    // some code here 
}); 

Что я должен сделать, чтобы реализовать код для работы, как это?

Answer 1

Если это просто обработчик событий, активирует ваш плагин событие, тогда вы можете привязываться к обработчику событий так же, как и любое другое событие.

$.fn.myPlugin = function(){ 
    return this.each(function(){ 
     var $self = $(this); 

     ... generate markup and show popup ... 
     okbtn.on('click',function(e){ 
      e.preventDefault(); 
      if ($self.triggerHandler("mypluginok")) { 
       // do your plugin stuff 
      } 
     }); 

    }); 
}; 

$("#someel").myPlugin().on("mypluginok",function(){ 
    console.log("Ok button pressed!") 
    // return false; // this would prevent the plugin's click handling 
}) 

Он не предложил добавить дополнительные методы, такие как onOkay, что и может конфликтовать с другими плагинами, если указанные другие плагины также определить onOkay метод на $.fn.

Answer 2

В принципе, вы захотите передать функцию в свой плагин и использовать ее в качестве обратного вызова. Вот некоторые простые псевдо-код, чтобы показать пример:

plugin_func = function(params, callback){ 
    // Do some awesome stuff with params 
    var callback_arguments = 'foo' + params; 
    callback(callback_arguments); 
} 

Теперь вы вызываете эту функцию с функцией обратного вызова, как это:

plugin_func('bar', function(response){ 
    console.log(response); 
}); 

---

Вот еще один способ использования обратных вызовов, если вам нужно манипулировать объем с обратными вызовами: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

callback.apply(thisScope, [ array_of_args_passed_to_callback ]