Note that there are some explanatory texts on larger screens.

plurals
  1. POIs it a good practice to store jquery plugin configuration in data?
    primarykey
    data
    text
    <p>I want to create jQuery plugin with config (for example plugin <code>myplugin</code>). Than call <code>$(elem).myplugin(config);</code> After that I want to call methods from this plugin like <code>$(elem).myplugin().method()</code> with already stored config.</p> <p>My offer is something like that:</p> <pre><code>(function($) { $.fn.myplugin = function(options) { var $this = $(this); var getOptions = function() { return $this.data('myplugin'); }; var initOptions = function(opt) { $this.data('myplugin', opt); }; var setOption = function(key, value) { $this.data('myplugin')[key] = value; } var updateBorderWidth = function() { $this.css('border-width', getOptions().borderWidth * getOptions().coeficient); }; var init = function(opt) { initOptions(opt); updateBorderWidth(); } function changeBorder(width) { setOption('borderWidth', width) updateBorderWidth(); } if(options) { init(options); } return { changeBorder : changeBorder }; } })(jQuery); </code></pre> <p>And usage:</p> <pre><code> $(function() { var item1 = $('#test1').myplugin({ coeficient: 1, borderWidth: 1 }); var item1 = $('#test2').myplugin({ coeficient: 2, borderWidth: 1 }); $('#btn').click(updateBorder); }); function updateBorder() { $('#test1').myplugin().changeBorder($('#inpt').val()); $('#test2').myplugin().changeBorder($('#inpt').val()); } </code></pre> <p>Example: <a href="http://jsfiddle.net/inser/zQumX/4/">http://jsfiddle.net/inser/zQumX/4/</a></p> <p>My question: is it a good practice to do that?</p> <p>May be it's incorrect approach. Can you offer better solution?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload