jQuery的自定義部件：返回不同的對象的鏈接？

Question

我正在寫一個自定義的jQuery插件的圖像。 在它的「構造」（_create - 方法）的圖像被包裹成一個div盒：

$.widget("custom.bazinga", { 
    _create: function() { 
     var container = $('<div/>'); 
     $(this.element).wrap(container); 
    } 
}); 

我怎樣才能返回<div>元素，而不是形象？ （對於鏈接這樣的功能：）

$('#foo') 
    .bazinga() 
    .height(200); 

截至目前，高度應用於圖像，而不是到div箱（這是本什麼其實我是想）。

這裏有一個的jsfiddle：http://jsfiddle.net/PGcXF/1/

Answer 1

jQuery UI的內部機制阻止您接收任何比調用對象不同。這是由於您使用$ .widget方法時有侷限性，因爲它只是不可能影響動態創建的「bazinga」方法的返回值。

一個可行的辦法是實施該行爲納入jQuery的UI部件的核心，我不會推薦（的升級 - 可能的損失和可能不是很容易做到）。

也許更好/更容易的解決辦法是鏈「父（）」調用來訪問新生成的jQuery的元素：

$('#foo') 
    .bazinga() 
    .parent() 
    .height(200); 

此外，儘量將所有小窗口相關的功能到小工具.. 。

$.widget("custom.bazinga", { 
    _create: function() { 
     this.element.wrap($('<div/>')); 
     this.container = this.element.parent(); 

     // Set height of parent object 
     this.container.height(this.options.height); 

    } 
}); 

// Set default options 
$.custom.bazinga.prototype.options.height = 100; 

...和使用選項來配置窗口小部件

$('#foo').bazinga({ 
    height: 200 
});