jQuery UI namespaceWidget
-
12-11-2019 - |
Question
I'm looking over the ui.dialog
source code, which is probably the best learning experience ever.
I see they reference uiDialog
a lot, and it seems clear that uiDialog reefers to the widget itself. So I tried this in my widget, as in namespaceWidgetName
but it's undefined. Do I understand uiDialog
correctly, and how do I reefer to my widget within the widget?
(function( $, undefined ) {
$.widget("dbd.myWidgetName", {
options: {
//autoOpen: true,
},
_create: function() {
},
widget: function() {
return this.dbdMyWidgetName;
}
// rest of widget code
Solution
In the _create
function of ui.dialog there is a line that reads:
uiDialog = (self.uiDialog = $('<div></div>'))
This is how the uiDialog
property is initialized.
Depending on how your widget works, you might not need to provide a widget
property/function. Many jQuery widgets do not. The dialog
widget creates some DOM content that wraps the element you specify in $.dialog()
, and its widget
property/function enables you to access that DOM element.
If you want to provide a widget
property to be consistent with dialog
, you could simply use the underlying element
of your widget like this:
$.widget("dbd.myWidgetName", {
options: {
//autoOpen: true,
},
_create: function() {
},
widget: function() {
return this.element;
}
}
All jQuery widgets have a property called element
that refers to the underlying DOM element(s), wrapped in a jQuery instance. Take a look in a debugger to see how it works.