JQuery: применять плагин динамически

Question

я имею эту разметку:

<div plug=tButton></div> 

и написал небольшой плагин, который делает кнопку Ouf в DIV, как это:

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

мой вопрос: когда только имея div (и его атрибут plug-а), как я могу применить к нему соответствующий плагин (без использования eval)?

она должна быть:

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

, но не работает, очевидно.

thx.

Answer 1

Я бы рассмотрел использование классов, чтобы определить, какие элементы получают, какие плагины и применять их с помощью селекторов. Предполагая, что классы имеют то же имя, что и плагин, вы можете индексировать и объект jQuery, чтобы применить его.

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

или

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

Учитывая вашу разметку, если вы пытаетесь применить tButton() плагин, я думаю, вы бы просто сделать это:

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

Answer 3

Я думаю, что вы хотите это

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

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

}); 

but th это, вероятно, не лучший способ сделать что-то с точки зрения производительности. Я бы предложил использовать класс CSS для идентификации элементов, к которым вы хотите применить свой плагин, а затем вызвать функцию плагина в коллекции, возвращенной с помощью соответствующего селектора классов. Например, если элементы всегда <div> элементы

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

Answer 4

Я не совсем понимаю, что вы пытаетесь сделать, но моя догадка такова:

• Вы устанавливаете эти дивы с пользовательскими атрибутами, и с помощью JQuery для
  • Стиль их как кнопки
  • Добавить интерактивное поведение им

Я уже пытался предложить решение, основанное на ваш вопрос, но если я понимаю, что вы делаете правильно, это кажется простым подходом было бы это:

• Дайте ваши элементы разные классы вместо пользовательских атрибутов, таких как plug=
• Используйте CSS, чтобы ухаживать за ними, как кнопки.Рассмотрите возможность использования фактического button элемент вместо того, DIV
• Использование JQuery и пользовательский плагин (если вам нравится), чтобы добавить какие-либо поведения вы хотите

Имеет ли это смысл, или я что-то отсутствует?

Answer 5

У вас его почти нет. Вам просто нужно вызвать функцию, которую вы искали. Сделайте это:

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