Adding a jQuery UI widget to the DOM

Question

Where in the jQuery object is the object that defines a UI widget stored?

I am creating a set of custom jQuery UI widgets for a web page. User interaction with the page will add one or more of these widgets to the DOM. At the point where this happens, there will be no element in the DOM for the widget to attach itself to. I want to write my custom widgets so that they can be used both like a normal UI widget, and also as an on-the-fly addition.

Let me give an example. This is how I would convert an existing element in the DOM to a custom widget:

HTML snippet:

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

JS snippet:

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

Notice the rootElement property. My custom widgets will all require different types of HTMLElement to attach themselves to.

Here's what I want to be able to do, starting with an empty parent element:

HTML snippet:

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

JS snippet:

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

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

In the createCustom() function, I would like to be able to access the definition of the custom.tableWidget, so that I can retrieve the value of its rootElement property. I can then append an element of that type to the parent element, and then convert this newly-added element into a widget.

Where in the jQuery object is this widget definition object stored?

user400654 · Accepted Answer · 2014-02-10 23:23:51Z

1

It's located here: $.namespace.widgetname.prototype.propertyname

$.custom.tableWidget.prototype.options

http://jsfiddle.net/JDf65/

(this prototype is also what you would use to extend/override existing widgets)

answered Feb 10, 2014 at 23:23

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Newton Over a year ago

$.custom.tableWidget.prototype.rootElement gives me exactly what I'm looking for. Thank you.

Collectives™ on Stack Overflow

Adding a jQuery UI widget to the DOM

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related