StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I had the same problem : how to use many instances of a plugin on only one form ? The usual way fails because in fact, the instance is not an instance of the plugin : it is an instance of jQuery. So, if more than one element is defined to be managed by a plugin, each definition overrides the previous parameters.</p> <p>It was necessary to have a look on the problem from another side.</p> <p>A plugin is usually made to react on a specific event for a specific element. e.g.. onclick on a button, or when the mouse is over the element. In my case, I had to use an autocomplete plugin for a city field, but my form has 5 tabs and in total 4 fields for the cities for 4 different parts of the information to be collected. For each fields, parameters are specifics.</p> <p>By the way, I've realised iI don't need to have the plugin active everytime : just on the appropriate event on the field is enough.</p> <p>So I had an idea : an event manager for each element. When the event appends, so I define the plugin action. Some code will be more efficient to explain : imagine you have 3 div blocks and your plugin must change the colours, but with specifics colours depending on which div is affected.</p> <pre><code> $(document).ready(function(){ // Wich elements are affected by the plugin var ids = ['myDiv1','myDiv2','myDiv3']; // foe each one : for (v in ids) { //define from an event : $('#'+ ids[v]).focus(function() { // depending which id is active : var aParams, idDiv = $(this).attr('id'); // Choosing the right params switch(idDiv) { case 'myDiv1': aParams = {'color': '#660000', 'background-color': '#0000ff'}; break; case 'myDiv2': aParams = {'color': '#006600', 'background-color': '#ff00ff'}; break; case 'myDiv3': aParams = {'color': '#000066', 'background-color': '#ff0000'}; break; default: aParams = {'color': '#000000', 'background-color': '#ffffff'}; }; // Defining the plugin on the right element with the right params $(this).myPlugin( { colors: aParams }); }); } });</code></pre> <p>And this works fine.</p> <p>Sorry if my English is not perfect - I hope you understand well.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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