向DOM添加jQuery UI小部件

jQuery對象中定義存儲UI小部件的對象在哪裏？向DOM添加jQuery UI小部件

我正在爲網頁創建一組定製的jQuery UI小部件。用戶與頁面的交互會將一個或多個這些小部件添加到DOM。在發生這種情況的地方，小部件將不會有任何元素附加到它自己。我想編寫我的自定義小部件，以便它們可以像普通的UI小部件一樣使用，也可以作爲即時添加使用。

讓我舉個例子。這是我怎麼會在DOM現有元素轉換爲自定義的widget：

HTML片段：

<div id="customWidgetsParent"> 
    <table class='custom-tableWidget'></table> 
</div>

JS片段：

(function($) { 
    $.widget(
    "custom.tableWidget" 
    , { options: {} 
    , rootElement: "<table></table>" 
    , _create: function create() { 
     // CODE to create a custom table widget 
     } 
    } 
) 
})(jQuery)

通知的rootElement財產。我的自定義小部件都將需要不同類型的HTMLElement來附加自己。

這裏就是我希望能夠做的，從一個空的父元素：

HTML片段：

<div id="customWidgetsParent"></div>

JS片段：

var widgets = { 
    "custom.tableWidget": { 
    colNames: ["Column 1", "Column 2", "Column 3"] 
    , rowNames: ["Row 1", "Row 2"] 
    } 
} 

createCustom(widgets, $("#customWidgetsParent"))

在createCustom()功能，我希望能夠訪問custom.tableWidget的定義，以便我可以檢索其rootElement屬性的值。然後，我可以將該類型的元素附加到父元素，然後將這個新添加的元素轉換爲一個小部件。

jQuery對象中的這個小部件定義對象存儲在哪裏？

來源

2014-02-10 James Newton