jQuery: apply dynamique du plugin

Question

je vais avoir ce balisage:

<div plug=tButton></div> 

et a écrit un petit plugin qui fait un bouton ouf de la div comme ceci:

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

ma question: quand seulement ayant le div (et son attribut plug), comment puis-je lui appliquer le plugin correspondant (sans utiliser eval)?

il devrait ressembler à:

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

mais ne fonctionne évidemment pas.

thx.

Answer 1

J'envisagerais d'utiliser des classes, pour distinguer les éléments obtenant quels plugins et les appliquer en utilisant des sélecteurs. En supposant que les classes ont le même nom que le plugin, vous pouvez aussi l'indexer dans l'objet jQuery pour l'appliquer.

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

ou

$(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

Compte tenu de votre balisage, si vous essayez d'appliquer votre plugin tButton(), je pense que vous devriez juste le faire:

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

Answer 3

Je pense que vous voulez cette

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

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

}); 

mais Ce n'est probablement pas la meilleure façon de faire les choses en termes de performance. Je suggère d'utiliser une classe CSS pour identifier les éléments auxquels vous souhaitez appliquer votre plugin, puis appelez la fonction plugin sur la collection retournée en utilisant le sélecteur de classe approprié. Par exemple, si les éléments sont toujours <div> éléments

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

Answer 4

Je ne comprends pas tout à fait ce que vous essayez de faire, mais ma meilleure estimation est la suivante:

• vous configurez ces divs avec des attributs personnalisés, et en utilisant jQuery pour
  • leur style sous forme de boutons
  • Ajouter un comportement interactif pour les

J'ai déjà essayé d'offrir une solution en fonction de votre question, mais si je comprends bien ce que vous faites correctement, il semble une approche plus simple serait:

• Donnez à vos éléments différentes classes au lieu des attributs personnalisés comme plug=
• Utilisez CSS pour prendre soin de les styliser comme des boutons.Pensez à utiliser un élément button réel au lieu d'un div
• Utilisez jQuery et votre plug-in personnalisé (si vous voulez) pour ajouter des comportements que vous voulez

Est-ce que du sens, ou suis-je manque quelque chose?

Answer 5

Vous l'avez presque. Vous avez juste besoin d'appeler la fonction que vous avez recherchée. Pour ce faire:

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