-
Notifications
You must be signed in to change notification settings - Fork 73
/
dialog.xml
285 lines (283 loc) · 13.2 KB
/
dialog.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<?xml version="1.0"?>
<entry name="dialog" type="widget" widget-element="generated wrapper">
<title>Dialog Widget</title>
<desc>Open content in an interactive overlay.</desc>
<longdesc>
<p>A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.</p>
<p>If the content length exceeds the maximum height, a scrollbar will automatically appear.</p>
<p>A bottom button bar and semi-transparent modal overlay layer are common options that can be added.</p>
</longdesc>
<note id="functional-css"/>
<added>1.0</added>
<options>
<option name="autoOpen" default="true">
<desc>If set to <code>true</code>, the dialog will automatically open upon initialization. If <code>false</code>, the dialog will stay hidden until the <a href="#method-open"><code>open()</code></a> method is called.</desc>
<type name="Boolean" />
</option>
<option name="buttons" default="{}">
<desc>Specifies which buttons should be displayed on the dialog. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.</desc>
<type name="Object">
<desc>The keys are the button labels and the values are the callbacks for when the associated button is clicked.</desc>
</type>
<type name="Array">
<desc>Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.</desc>
</type>
</option>
<option name="closeOnEscape" default="true">
<desc>Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.</desc>
<type name="Boolean" />
</option>
<option name="closeText" default='"close"'>
<desc>Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.</desc>
<type name="String" />
</option>
<option name="dialogClass" default='""'>
<desc>The specified class name(s) will be added to the dialog, for additional theming.</desc>
<type name="String" />
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="draggable" default="true">
<desc>If set to <code>true</code>, the dialog will be draggable by the title bar. Requires the <a href="/draggable/">jQuery UI Draggable wiget</a> to be included.</desc>
<type name="Boolean" />
</option>
<option name="height" default='"auto"'>
<desc>The height of the dialog.</desc>
<type name="Number">
<desc>The height in pixels.</desc>
</type>
<type name="String">
<desc>The only supported string value is <code>"auto"</code> which will allow the dialog height to adjust based on its content.</desc>
</type>
</option>
<option name="hide" default="null">
<desc>If and how to animate the hiding of the dialog.</desc>
<type name="Number">
<desc>
The dialog will fade out while animating the height and width for the specified duration.
</desc>
</type>
<type name="String">
<desc>
The dialog will be hidden using the specified jQuery UI effect. See the <a href="/category/effects/">list of effects</a> for possible values.
</desc>
</type>
<type name="Object">
<desc>If the value is an object, then <code>effect</code>, <code>duration</code>, and <code>easing</code> properties may be provided. The <code>effect</code> property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If <code>duration</code> or <code>easing</code> is omitted, then the default values will be used.</desc>
</type>
</option>
<option name="maxHeight" default="false">
<desc>The maximum height to which the dialog can be resized, in pixels.</desc>
<type name="Number" />
</option>
<option name="maxWidth" default="false">
<desc>The maximum width to which the dialog can be resized, in pixels.</desc>
<type name="Number" />
</option>
<option name="minHeight" default="150">
<desc>The minimum height to which the dialog can be resized, in pixels.</desc>
<type name="Number" />
</option>
<option name="minWidth" default="150">
<desc>The minimum width to which the dialog can be resized, in pixels.</desc>
<type name="Number" />
</option>
<option name="modal" default="false">
<desc>If set to <code>true</code>, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements.</desc>
<type name="Boolean" />
</option>
<option name="position" default='{ my: "center", at: "center", of: window }'>
<desc>Specifies where the dialog should be displayed. The dialog will handle collisions such that as much of the dialog is visible as possible.</desc>
<type name="Object">
<desc>Identifies the position of the dialog when opened. The <code>of</code> option defaults to the window, but you can specify another element to position against. You can refer to the <a href="/position">jQuery UI Position</a> utility for more details about the various options.</desc>
</type>
<type name="String">
<desc>A string representing the position within the viewport. Possible values: <code>"center"</code>, <code>"left"</code>, <code>"right"</code>, <code>"top"</code>, <code>"bottom"</code>.</desc>
</type>
<type name="Array">
<desc>An array containing an <em>x, y</em> coordinate pair in pixel offset from the top left corner of the viewport or the name of a possible string value.</desc>
</type>
</option>
<option name="resizable" default="true">
<desc>If set to <code>true</code>, the dialog will be resizable. Requires the <a href="/resizable/">jQuery UI Resizable widget</a> to be included.</desc>
<type name="Boolean" />
</option>
<option name="show" default="null">
<desc>If and how to animate the showing of the dialog.</desc>
<type name="Number">
<desc>
The dialog will fade in while animating the height and width for the specified duration.
</desc>
</type>
<type name="String">
<desc>
The dialog will be shown using the specified jQuery UI effect. See the <a href="/category/effects/">list of effects</a> for possible values.
</desc>
</type>
<type name="Object">
<desc>If the value is an object, then <code>effect</code>, <code>duration</code>, and <code>easing</code> properties may be provided. The <code>effect</code> property must be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If <code>duration</code> or <code>easing</code> is omitted, then the default values will be used.</desc>
</type>
</option>
<option name="stack" default="true">
<desc>Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus.</desc>
<type name="Boolean" />
</option>
<option name="title" default='""'>
<desc>Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the <code>title</code> attribute on the dialog source element.</desc>
<type name="String" />
</option>
<option name="width" default="300">
<desc>The width of the dialog, in pixels.</desc>
<type name="Number" />
</option>
<option name="zIndex" default="1000">
<desc>The starting z-index for the dialog.</desc>
<type name="Integer" />
</option>
</options>
<events>
<event name="beforeClose" type="dialogbeforeclose">
<desc>Triggered when a dialog is about to close. If canceled, the dialog will not close.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object"/>
</event>
<xi:include href="../includes/widget-event-create.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<event name="open" type="dialogopen">
<desc>Triggered when the dialog is opened.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object"/>
</event>
<event name="focus" type="dialogfocus">
<desc>Triggered when the dialog gains focus.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object"/>
</event>
<event name="dragStart" type="dialogdragstart">
<desc>Triggered when the user starts dragging the dialog.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="position" type="Object">
<desc>The current CSS position of the dialog.</desc>
</property>
<property name="offset" type="Object">
<desc>The current offset position of the dialog.</desc>
</property>
</argument>
</event>
<event name="drag" type="dialogdrag">
<desc>Triggered while the dialog is being dragged.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="position" type="Object">
<desc>The current CSS position of the dialog.</desc>
</property>
<property name="offset" type="Object">
<desc>The current offset position of the dialog.</desc>
</property>
</argument>
</event>
<event name="dragStop" type="dialogdragstop">
<desc>Triggered after the dialog has been dragged.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="position" type="Object">
<desc>The current CSS position of the dialog.</desc>
</property>
<property name="offset" type="Object">
<desc>The current offset position of the dialog.</desc>
</property>
</argument>
</event>
<event name="resizeStart" type="dialogresizestart">
<desc>Triggered when the user starts resizing the dialog.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="orginalPosition" type="Object">
<desc>The CSS position of the dialog prior to being resized.</desc>
</property>
<property name="position" type="Object">
<desc>The current CSS position of the dialog.</desc>
</property>
<property name="originalSize" type="Object">
<desc>The size of the dialog prior to being resized.</desc>
</property>
<property name="size" type="Object">
<desc>The current size of the dialog.</desc>
</property>
</argument>
</event>
<event name="resize" type="dialogresize">
<desc>Triggered while the dialog is being resized.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="orginalPosition" type="Object">
<desc>The CSS position of the dialog prior to being resized.</desc>
</property>
<property name="position" type="Object">
<desc>The current CSS position of the dialog.</desc>
</property>
<property name="originalSize" type="Object">
<desc>The size of the dialog prior to being resized.</desc>
</property>
<property name="size" type="Object">
<desc>The current size of the dialog.</desc>
</property>
</argument>
</event>
<event name="resizeStop" type="dialogresizestop">
<desc>Triggered after the dialog has been resized.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="orginalPosition" type="Object">
<desc>The CSS position of the dialog prior to being resized.</desc>
</property>
<property name="position" type="Object">
<desc>The current CSS position of the dialog.</desc>
</property>
<property name="originalSize" type="Object">
<desc>The size of the dialog prior to being resized.</desc>
</property>
<property name="size" type="Object">
<desc>The current size of the dialog.</desc>
</property>
</argument>
</event>
<event name="close" type="dialogclose">
<desc>Triggered when the dialog is closed.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object"/>
</event>
</events>
<methods>
<method name="close">
<desc>Closes the dialog.</desc>
</method>
<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<method name="isOpen" return="Boolean">
<desc>Whether the dialog is currently open.</desc>
</method>
<method name="moveToTop">
<desc>Moves the dialog to the top of the dialog stack.</desc>
</method>
<method name="open">
<desc>Opens the dialog.</desc>
</method>
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</methods>
<example>
<desc>A simple jQuery UI Dialog</desc>
<code><![CDATA[
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
]]></code>
<html><![CDATA[
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
]]></html>
</example>
<category slug="widgets"/>
</entry>