vendredi 8 juillet 2016

jQuery extend plugin settings with data attributes


I have managed to modify simple number spinner plugin to use data-attribute for settings. Here is the part of the code (function($) { $.fn.simpleSpinner = function(options) { var settings = $.extend({ size: 'large', step: 1, }, $(this).data('spinner'), options); return this.each(function(e) { var self = $(this); ...... }); }; }(jQuery)); Then I initialize plugin like: $(function() { $('.spinner').simpleSpinner(); }); <input class="spinner" type="number" value="1" min="1" max="10" data-spinner='{"size":"large"}'> <input class="spinner" type="number" value="1" min="1" max="10" data-spinner='{"size":"small"}'> This all works fine, except that if I have more then one element, then data-attributes are applied to all of them from first element. I would like to be able to individually control each element using size in data-spinner without the need of having two instances of plugin, $('.spinner2').simpleSpinner(); with different class assigned to it.

Aucun commentaire:

Enregistrer un commentaire