jQuery的：應用動態插件

我遇到這樣的標記：jQuery的：應用動態插件

<div plug=tButton></div>

，並寫了一個小插件，它使DIV像這樣的一個按鈕OUF：

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

我的問題：只有當具有div（及其插件屬性），我如何將相應的插件應用於它（不使用eval）？

它應該是這樣的：

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

但沒有明顯的工作。

thx。

來源

2009-12-05 Fuxi

你能澄清一下你的問題嗎？ – 2009-12-05 18:28:03

我會考慮使用類來區分哪些元素獲取哪些插件並使用選擇器應用它們。假設這些類與插件具有相同的名稱，您也可以將其索引到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>

來源

2009-12-05 18:28:24 tvanfosson

您不需要評估字符串，因爲插件將是jQuery對象的屬性，您可以使用jQuery [「pluginName」]（）表示法來調用該函數。這裏的演示 - http://jsbin.com/oyobe/edit – 2009-12-05 18:41:13

我沒有想過作爲jQuery元素屬性的函數。這將工作，但我仍然使用類選擇器。這將使它更容易申請。我會更新。 – tvanfosson 2009-12-05 18:57:58

@tvanfosson - 同意類選擇器的方法 – 2009-12-05 19:11:37

鑑於您的標記，如果你想申請的tButton()插件，我覺得你只是這樣做：

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

來源

2009-12-05 18:29:13

我想你想這

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

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

});

但th可能不是在性能方面做事情的最佳方式。我建議使用一個CSS類來標識你想要應用你的插件的元素，然後在使用適當的類選擇器返回的集合上調用插件函數。例如，如果元素始終<div>元素

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

來源

2009-12-05 18:38:17

我不太明白你想要做什麼，但我最好的猜測是這樣的：

你設置這些div帶有自定義屬性，並使用jQuery
- 風格他們作爲按鈕
- 添加交互行爲給他們

我已經嘗試根據您的問題提供瞭解決方案，但如果我理解你正確地做什麼，這似乎是一個簡單的方法是這樣的：

給你的元素不同的類而不是自定義屬性，如plug=
使用CSS來照顧它們像按鈕樣式。考慮使用實際button元素，而不是一個div
使用jQuery和您的自定義插件（如果你喜歡）添加要

這是否有意義，還是我失去了一些東西的任何行爲？

來源

2009-12-05 18:39:39

你幾乎擁有它。你只需要調用你查找的函數。這樣做：

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

來源

2009-12-05 19:08:11 jpsimons

jQuery的：應用動態插件

回答

相關問題