|
23 | 23 |
|
24 | 24 | <h3>Initialization</h3>
|
25 | 25 |
|
26 |
| - <p>In order to track the state of the widget, we must introduce a full life cycle for the widget. The life cycle starts when the widget is initalized. To initialize a widget, we simply call the plugin on one or more elements.</p> |
| 26 | + <p>In order to track the state of the widget, we must introduce a full life cycle for the widget. The life cycle starts when the widget is initialized. To initialize a widget, we simply call the plugin on one or more elements.</p> |
27 | 27 |
|
28 | 28 | <pre><code>
|
29 | 29 | $( "#elem" ).progressbar();
|
|
105 | 105 | <pre><code>
|
106 | 106 | $( ":data( 'ui-progressbar' )" );
|
107 | 107 | </code></pre>
|
| 108 | + |
| 109 | + <h3>Properties</h3> |
| 110 | + |
| 111 | + <p>All widgets have the following set of properties:</p> |
| 112 | + |
| 113 | + <ul> |
| 114 | + <li> |
| 115 | + <strong>document</strong>: The <code>document</code> that the widget's element is within. Useful if you need to interact with widgets within iframes. |
| 116 | + </li> |
| 117 | + <li> |
| 118 | + <strong>element</strong>: A jQuery object containing the element used to instantiate the widget. If you select multiple elements and call <code>.myWidget()</code>, a separate widget instance will be created for each element. Therefore, this property will always contain one element. |
| 119 | + </li> |
| 120 | + <li> |
| 121 | + <strong>namespace</strong>: The location on the global jQuery object that the widget's prototype is stored on. For example a <code>namespace</code> of <code>"ui"</code> indicates that the widget's prototype is stored on <code>$.ui</code>. |
| 122 | + </li> |
| 123 | + <li> |
| 124 | + <strong>options</strong>: An object containing the options currently being used by the widget. On instantiation, any options provided by the user will automatically be merged with any default values defined in <code>$.myNamespace.myWidget.prototype.options</code>. User specified options override the defaults. |
| 125 | + </li> |
| 126 | + <li> |
| 127 | + <strong>uuid</strong>: A unique integer identifier for the widget. |
| 128 | + </li> |
| 129 | + <li> |
| 130 | + <strong>version</strong>: The string version of the widget. For jQuery UI widgets this will be set to the version of jQuery UI the widget is using. Widget developers have to set this property in their prototype explicitly. |
| 131 | + </li> |
| 132 | + <li> |
| 133 | + <strong>widgetEventPrefix</strong>: The prefix prepended to the name of events fired from this widget. For example the <code>widgetEventPrefix</code> of the <a href="/draggable">draggable widget</a> is <code>"drag"</code>, therefore when a draggable is created, the name of the event fired is <code>"dragcreate"</code>. By default the <code>widgetEventPrefix</code> of a widget is its name. <em>Note: This property is deprecated and will be removed in a later release. Event names will be changed to widgetName:eventName (e.g. <code>"draggable:create"</code>.</em> |
| 134 | + </li> |
| 135 | + <li> |
| 136 | + <strong>widgetFullName</strong>: The full name of the widget including the namespace. For <code>$.widget( "myNamespace.myWidget", {} )</code>, <code>widgetFullName</code> will be <code>"myNamespace-myWidget"</code>. |
| 137 | + </li> |
| 138 | + <li> |
| 139 | + <strong>widgetName</strong>: The name of the widget. For <code>$.widget( "myNamespace.myWidget", {} )</code>, <code>widgetName</code> will be <code>"myWidget"</code>. |
| 140 | + </li> |
| 141 | + <li> |
| 142 | + <strong>window</strong>: The <code>window</code> that the widget's element is within. Useful if you need to interact with widgets within iframes. |
| 143 | + </li> |
| 144 | + </ul> |
108 | 145 | </longdesc>
|
109 | 146 | <category slug="utilities"/>
|
110 | 147 | </entry>
|
|
0 commit comments