For training, I make a plugin that opens / closes pop-up windows. Accordingly, it should have methods: open a window, close a window, etc. These methods should be called, both inside the plugin, when performing certain actions, as well as externally: $('#box').plugin.close() ΠΈΠ»ΠΈ $('#box').plugin('close');

I re-read all manuals, possible structures of plug-ins. Now it is implemented using the standard structure, when the methods init , destroy are allocated to the methods object. But I do not understand how to properly implement the close method.

I do not understand what parameters it needs to pass, or how to call it, so that it sees the variables defined in the body of the plug-in function.

Here is an example structure:

 (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 );

I need the mpControl and mpContent variables for a particular instance to be available inside the Close () method

How to implement it correctly? So that the method can be called inside and outside the plug-in and interact with all its variables.

Update From what came up after writing the post.

  1. Write control elements in data for the element to which the plugin is applied. Next, inside the method, pull out these objects and work with them (I don’t really like it)

  2. Write control objects to the settings array. Pass it to the Close() function, since He is still there to choose the speed and effect. There read from it.

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

Everything is already working, it remains to get confidence that this is the right approach :)

  • > I re-read all the manuals, the possible structures of @Blackmore plug-ins and you did not try to see the source code of the not-trimmed jQuery and understand how it works with plug-ins ?! - Rules
  • one
    I did not quite understand, my question is not how jQuery works with plugins, but how best to implement the functionality I need. - Blackmore
  • The idea of ​​transferring context is not the best, since in theory it is unpredictable (something may or may not be somewhere). It is better when everything that is needed is passed as an argument. If large-scale changes are needed, two structures are transmitted, the input, where we get the data from, and the output, into the attributes of which we write. - SilverIce
  • @Blackmore, could you share links to what you read? (I 'm interested in my own development) - Viacheslav
  • one
    habrahabr.ru/post/158235 jquery.page2page.ru/index.php5/… Well, all on request make jquery plugin ;-) - Blackmore

1 answer 1

The best place to use is jquery Widget Factory . I made a demo here, how to create a plugin using this technique, it will help you to bypass all the pitfalls:

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);