將jQuery UI小部件添加到DOM

Question

定義UI小部件的對象存儲在jQuery對象中的何處？

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

讓我舉個例子吧。 這就是將DOM中的現有元素轉換為自定義小部件的方式：

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對象中的何處？

Answer 1

它位於這里： $.namespace.widgetname.prototype.propertyname

$.custom.tableWidget.prototype.options

http://jsfiddle.net/JDf65/

（該原型也是您用來擴展/覆蓋現有小部件的原型）