jQuery: apply plugin dynamically

Question

hi,

i'm having this markup:

<div plug=tButton></div>

and wrote a little plugin which makes a button ouf of the div like this:

var cmd = $("[plug]");
cmd.tButton();

my question: when only having the div (and its plug-attribute), how can i apply the corresponding plugin to it (without using eval)?

it should be like:

var plug = div.attr("plug");
div[plug];

but doesn't work obviously.

thx.

Answer 1

I'd consider using classes, to distinguish which elements get which plugins and apply them using selectors. Assuming that the classes have the same name as the plugin, you can index into the jQuery object, too, to apply it.

$(function() {
   $('.tButton').tButton();
   $('.jButton').jButton();
   ...
});

or

$(function() {
   var plugins = [ 'tButton', 'jButton', ... ];
   $.each(plugins, function(i,val) {
       $('.' + val).each( function() {
          jQuery[val].apply(this);
       });
   });
});

<div class="tButton">...</div>
<div class="jButton">...</div>

Answer 2

Given your markup, if you're trying to apply your tButton() plugin, I think you'd just do this:

$("div[plug='tButton']").tButton();
$("div[plug='xButton']").xButton();

Answer 3

I think you want this

$('div[plug]').each(function() {

    var $this = $(this);
    var plugin = $this.attr('plug');
    $this[plugin]();

});

but this is probably not the best way to do things in terms of performance. I would suggest using a CSS class to identify the elements that you want to apply your plugin to, then call the plugin function on the collection returned using the appropriate class selector. For example, if the elements are always <div> elements

$('div.tButton').tButton();

Answer 4

I don't quite understand what you're trying to do, but my best guess is this:

• You're setting these divs with custom attributes, and using jQuery to
  • Style them as buttons
  • Add interactive behavior to them

I've already tried to offer a solution based on your question, but if I understand what you're doing correctly, it seems like a simpler approach would be this:

• Give your elements different classes instead of custom attributes like plug=
• Use CSS to take care of styling them like buttons. Consider using an actual button element instead of a div
• Use jQuery and your custom plugin (if you like) to add any behaviors you want

Does that make sense, or am I missing something?

Answer 5

You almost have it. You just need to call the function you looked up. Do this:

var plug = div.attr("plug");
div[plug]();