|
0
|
1
|
|
|
2 <ul class="UIAPIPlugin-toc">
|
|
|
3 <li><a href="#overview">Overview</a></li>
|
|
|
4 <li><a href="#options">Options</a></li>
|
|
|
5 <li><a href="#events">Events</a></li>
|
|
|
6 <li><a href="#methods">Methods</a></li>
|
|
|
7 <li><a href="#theming">Theming</a></li>
|
|
|
8 </ul>
|
|
|
9 <div class="UIAPIPlugin">
|
|
|
10 <h1>jQuery UI Dialog</h1>
|
|
|
11 <div id="overview">
|
|
|
12 <h2 class="top-header">Overview</h2>
|
|
|
13 <div id="overview-main">
|
|
|
14 <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>
|
|
|
15 <p>If the content length exceeds the maximum height, a scrollbar will automatically appear.</p>
|
|
|
16 <p>A bottom button bar and semi-transparent modal overlay layer are common options that can be added.</p>
|
|
|
17 <p>A call to <code>$(foo).dialog()</code> will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: <code>$(foo).dialog({ autoOpen: false })</code> and open it with <code>$(foo).dialog('open')</code>. To close it, use <code>$(foo).dialog('close')</code>. A more in-depth explanation with a full demo is available on <a href="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/" class="external text" title="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/">the Nemikor blog</a>.</p>
|
|
|
18 </div>
|
|
|
19 <div id="overview-dependencies">
|
|
|
20 <h3>Dependencies</h3>
|
|
|
21 <ul>
|
|
|
22 <li>UI Core</li>
|
|
|
23 <li>UI Position</li>
|
|
|
24 <li>UI Widget</li>
|
|
|
25 <li>UI Mouse (Optional; only needed if using UI Draggable or UI Resizable)</li>
|
|
|
26 <li>UI Draggable (Optional)</li>
|
|
|
27 <li>UI Resizable (Optional)</li>
|
|
|
28 </ul>
|
|
|
29 </div>
|
|
|
30 <div id="overview-example">
|
|
|
31 <h3>Example</h3>
|
|
|
32 <div id="overview-example" class="example">
|
|
|
33 <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
|
|
|
34 <p><div id="demo" class="tabs-container" rel="300">
|
|
|
35 A simple jQuery UI Dialog.<br />
|
|
|
36 </p>
|
|
|
37 <pre>$("#dialog").dialog();
|
|
|
38 </pre>
|
|
|
39 <p></div><div id="source" class="tabs-container">
|
|
|
40 </p>
|
|
|
41 <pre><!DOCTYPE html>
|
|
|
42 <html>
|
|
|
43 <head>
|
|
|
44 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
|
|
|
45 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
|
|
|
46 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
|
|
|
47
|
|
|
48 <script>
|
|
|
49 $(document).ready(function() {
|
|
|
50 $("#dialog").dialog();
|
|
|
51 });
|
|
|
52 </script>
|
|
|
53 </head>
|
|
|
54 <body style="font-size:62.5%;">
|
|
|
55
|
|
|
56 <div id="dialog" title="Dialog Title">I'm in a dialog</div>
|
|
|
57
|
|
|
58 </body>
|
|
|
59 </html>
|
|
|
60 </pre>
|
|
|
61 <p></div>
|
|
|
62 </p><p></div>
|
|
|
63 </div>
|
|
|
64 </div>
|
|
|
65 <div id="options">
|
|
|
66 <h2 class="top-header">Options</h2>
|
|
|
67 <ul class="options-list">
|
|
|
68
|
|
|
69 <li class="option" id="option-disabled">
|
|
|
70 <div class="option-header">
|
|
|
71 <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
|
|
|
72 <dl>
|
|
|
73 <dt class="option-type-label">Type:</dt>
|
|
|
74 <dd class="option-type">Boolean</dd>
|
|
|
75
|
|
|
76 <dt class="option-default-label">Default:</dt>
|
|
|
77 <dd class="option-default">false</dd>
|
|
|
78
|
|
|
79 </dl>
|
|
|
80 </div>
|
|
|
81 <div class="option-description">
|
|
|
82 <p>Disables (true) or enables (false) the dialog. Can be set when initialising (first creating) the dialog.</p>
|
|
|
83 </div>
|
|
|
84 <div class="option-examples">
|
|
|
85 <h4>Code examples</h4>
|
|
|
86 <dl class="option-examples-list">
|
|
|
87
|
|
|
88 <dt>
|
|
|
89 Initialize a dialog with the <code>disabled</code> option specified.
|
|
|
90 </dt>
|
|
|
91 <dd>
|
|
|
92 <pre><code>$( ".selector" ).dialog({ disabled: true });</code></pre>
|
|
|
93 </dd>
|
|
|
94
|
|
|
95
|
|
|
96 <dt>
|
|
|
97 Get or set the <code>disabled</code> option, after init.
|
|
|
98 </dt>
|
|
|
99 <dd>
|
|
|
100 <pre><code>//getter
|
|
|
101 var disabled = $( ".selector" ).dialog( "option", "disabled" );
|
|
|
102 //setter
|
|
|
103 $( ".selector" ).dialog( "option", "disabled", true );</code></pre>
|
|
|
104 </dd>
|
|
|
105
|
|
|
106 </dl>
|
|
|
107 </div>
|
|
|
108 </li>
|
|
|
109
|
|
|
110
|
|
|
111 <li class="option" id="option-autoOpen">
|
|
|
112 <div class="option-header">
|
|
|
113 <h3 class="option-name"><a href="#option-autoOpen">autoOpen</a></h3>
|
|
|
114 <dl>
|
|
|
115 <dt class="option-type-label">Type:</dt>
|
|
|
116 <dd class="option-type">Boolean</dd>
|
|
|
117
|
|
|
118 <dt class="option-default-label">Default:</dt>
|
|
|
119 <dd class="option-default">true</dd>
|
|
|
120
|
|
|
121 </dl>
|
|
|
122 </div>
|
|
|
123 <div class="option-description">
|
|
|
124 <p>When <i>autoOpen</i> is <i>true</i> the dialog will open automatically when <i>dialog</i> is called. If <i>false</i> it will stay hidden until <i>.dialog("open")</i> is called on it.</p>
|
|
|
125 </div>
|
|
|
126 <div class="option-examples">
|
|
|
127 <h4>Code examples</h4>
|
|
|
128 <dl class="option-examples-list">
|
|
|
129
|
|
|
130 <dt>
|
|
|
131 Initialize a dialog with the <code>autoOpen</code> option specified.
|
|
|
132 </dt>
|
|
|
133 <dd>
|
|
|
134 <pre><code>$( ".selector" ).dialog({ autoOpen: false });</code></pre>
|
|
|
135 </dd>
|
|
|
136
|
|
|
137
|
|
|
138 <dt>
|
|
|
139 Get or set the <code>autoOpen</code> option, after init.
|
|
|
140 </dt>
|
|
|
141 <dd>
|
|
|
142 <pre><code>//getter
|
|
|
143 var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
|
|
|
144 //setter
|
|
|
145 $( ".selector" ).dialog( "option", "autoOpen", false );</code></pre>
|
|
|
146 </dd>
|
|
|
147
|
|
|
148 </dl>
|
|
|
149 </div>
|
|
|
150 </li>
|
|
|
151
|
|
|
152
|
|
|
153 <li class="option" id="option-buttons">
|
|
|
154 <div class="option-header">
|
|
|
155 <h3 class="option-name"><a href="#option-buttons">buttons</a></h3>
|
|
|
156 <dl>
|
|
|
157 <dt class="option-type-label">Type:</dt>
|
|
|
158 <dd class="option-type">Object</dd>
|
|
|
159
|
|
|
160 <dt class="option-default-label">Default:</dt>
|
|
|
161 <dd class="option-default">{ }</dd>
|
|
|
162
|
|
|
163 </dl>
|
|
|
164 </div>
|
|
|
165 <div class="option-description">
|
|
|
166 <p>Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked. 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.
|
|
|
167 </p>
|
|
|
168 </div>
|
|
|
169 <div class="option-examples">
|
|
|
170 <h4>Code examples</h4>
|
|
|
171 <dl class="option-examples-list">
|
|
|
172
|
|
|
173 <dt>
|
|
|
174 Initialize a dialog with the <code>buttons</code> option specified.
|
|
|
175 </dt>
|
|
|
176 <dd>
|
|
|
177 <pre><code>$( ".selector" ).dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });</code></pre>
|
|
|
178 </dd>
|
|
|
179
|
|
|
180
|
|
|
181 <dt>
|
|
|
182 Get or set the <code>buttons</code> option, after init.
|
|
|
183 </dt>
|
|
|
184 <dd>
|
|
|
185 <pre><code>//getter
|
|
|
186 var buttons = $( ".selector" ).dialog( "option", "buttons" );
|
|
|
187 //setter
|
|
|
188 $( ".selector" ).dialog( "option", "buttons", { "Ok": function() { $(this).dialog("close"); } } );</code></pre>
|
|
|
189 </dd>
|
|
|
190
|
|
|
191 </dl>
|
|
|
192 </div>
|
|
|
193 </li>
|
|
|
194
|
|
|
195
|
|
|
196 <li class="option" id="option-buttons">
|
|
|
197 <div class="option-header">
|
|
|
198 <h3 class="option-name"><a href="#option-buttons">buttons</a></h3>
|
|
|
199 <dl>
|
|
|
200 <dt class="option-type-label">Type:</dt>
|
|
|
201 <dd class="option-type">Array</dd>
|
|
|
202
|
|
|
203 <dt class="option-default-label">Default:</dt>
|
|
|
204 <dd class="option-default">[ ]</dd>
|
|
|
205
|
|
|
206 </dl>
|
|
|
207 </div>
|
|
|
208 <div class="option-description">
|
|
|
209 <p>Specifies which buttons should be displayed on the dialog. Each element of the array must be an Object defining the properties to set on the button.
|
|
|
210 </p>
|
|
|
211 </div>
|
|
|
212 <div class="option-examples">
|
|
|
213 <h4>Code examples</h4>
|
|
|
214 <dl class="option-examples-list">
|
|
|
215
|
|
|
216 <dt>
|
|
|
217 Initialize a dialog with the <code>buttons</code> option specified.
|
|
|
218 </dt>
|
|
|
219 <dd>
|
|
|
220 <pre><code>$( ".selector" ).dialog({ buttons: [
|
|
|
221 {
|
|
|
222 text: "Ok",
|
|
|
223 click: function() { $(this).dialog("close"); }
|
|
|
224 }
|
|
|
225 ] });</code></pre>
|
|
|
226 </dd>
|
|
|
227
|
|
|
228
|
|
|
229 <dt>
|
|
|
230 Get or set the <code>buttons</code> option, after init.
|
|
|
231 </dt>
|
|
|
232 <dd>
|
|
|
233 <pre><code>//getter
|
|
|
234 var buttons = $( ".selector" ).dialog( "option", "buttons" );
|
|
|
235 //setter
|
|
|
236 $( ".selector" ).dialog( "option", "buttons", [
|
|
|
237 {
|
|
|
238 text: "Ok",
|
|
|
239 click: function() { $(this).dialog("close"); }
|
|
|
240 }
|
|
|
241 ] );</code></pre>
|
|
|
242 </dd>
|
|
|
243
|
|
|
244 </dl>
|
|
|
245 </div>
|
|
|
246 </li>
|
|
|
247
|
|
|
248
|
|
|
249 <li class="option" id="option-closeOnEscape">
|
|
|
250 <div class="option-header">
|
|
|
251 <h3 class="option-name"><a href="#option-closeOnEscape">closeOnEscape</a></h3>
|
|
|
252 <dl>
|
|
|
253 <dt class="option-type-label">Type:</dt>
|
|
|
254 <dd class="option-type">Boolean</dd>
|
|
|
255
|
|
|
256 <dt class="option-default-label">Default:</dt>
|
|
|
257 <dd class="option-default">true</dd>
|
|
|
258
|
|
|
259 </dl>
|
|
|
260 </div>
|
|
|
261 <div class="option-description">
|
|
|
262 <p>Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.</p>
|
|
|
263 </div>
|
|
|
264 <div class="option-examples">
|
|
|
265 <h4>Code examples</h4>
|
|
|
266 <dl class="option-examples-list">
|
|
|
267
|
|
|
268 <dt>
|
|
|
269 Initialize a dialog with the <code>closeOnEscape</code> option specified.
|
|
|
270 </dt>
|
|
|
271 <dd>
|
|
|
272 <pre><code>$( ".selector" ).dialog({ closeOnEscape: false });</code></pre>
|
|
|
273 </dd>
|
|
|
274
|
|
|
275
|
|
|
276 <dt>
|
|
|
277 Get or set the <code>closeOnEscape</code> option, after init.
|
|
|
278 </dt>
|
|
|
279 <dd>
|
|
|
280 <pre><code>//getter
|
|
|
281 var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
|
|
|
282 //setter
|
|
|
283 $( ".selector" ).dialog( "option", "closeOnEscape", false );</code></pre>
|
|
|
284 </dd>
|
|
|
285
|
|
|
286 </dl>
|
|
|
287 </div>
|
|
|
288 </li>
|
|
|
289
|
|
|
290
|
|
|
291 <li class="option" id="option-closeText">
|
|
|
292 <div class="option-header">
|
|
|
293 <h3 class="option-name"><a href="#option-closeText">closeText</a></h3>
|
|
|
294 <dl>
|
|
|
295 <dt class="option-type-label">Type:</dt>
|
|
|
296 <dd class="option-type">String</dd>
|
|
|
297
|
|
|
298 <dt class="option-default-label">Default:</dt>
|
|
|
299 <dd class="option-default">'close'</dd>
|
|
|
300
|
|
|
301 </dl>
|
|
|
302 </div>
|
|
|
303 <div class="option-description">
|
|
|
304 <p>Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.</p>
|
|
|
305 </div>
|
|
|
306 <div class="option-examples">
|
|
|
307 <h4>Code examples</h4>
|
|
|
308 <dl class="option-examples-list">
|
|
|
309
|
|
|
310 <dt>
|
|
|
311 Initialize a dialog with the <code>closeText</code> option specified.
|
|
|
312 </dt>
|
|
|
313 <dd>
|
|
|
314 <pre><code>$( ".selector" ).dialog({ closeText: 'hide' });</code></pre>
|
|
|
315 </dd>
|
|
|
316
|
|
|
317
|
|
|
318 <dt>
|
|
|
319 Get or set the <code>closeText</code> option, after init.
|
|
|
320 </dt>
|
|
|
321 <dd>
|
|
|
322 <pre><code>//getter
|
|
|
323 var closeText = $( ".selector" ).dialog( "option", "closeText" );
|
|
|
324 //setter
|
|
|
325 $( ".selector" ).dialog( "option", "closeText", 'hide' );</code></pre>
|
|
|
326 </dd>
|
|
|
327
|
|
|
328 </dl>
|
|
|
329 </div>
|
|
|
330 </li>
|
|
|
331
|
|
|
332
|
|
|
333 <li class="option" id="option-dialogClass">
|
|
|
334 <div class="option-header">
|
|
|
335 <h3 class="option-name"><a href="#option-dialogClass">dialogClass</a></h3>
|
|
|
336 <dl>
|
|
|
337 <dt class="option-type-label">Type:</dt>
|
|
|
338 <dd class="option-type">String</dd>
|
|
|
339
|
|
|
340 <dt class="option-default-label">Default:</dt>
|
|
|
341 <dd class="option-default">''</dd>
|
|
|
342
|
|
|
343 </dl>
|
|
|
344 </div>
|
|
|
345 <div class="option-description">
|
|
|
346 <p>The specified class name(s) will be added to the dialog, for additional theming.</p>
|
|
|
347 </div>
|
|
|
348 <div class="option-examples">
|
|
|
349 <h4>Code examples</h4>
|
|
|
350 <dl class="option-examples-list">
|
|
|
351
|
|
|
352 <dt>
|
|
|
353 Initialize a dialog with the <code>dialogClass</code> option specified.
|
|
|
354 </dt>
|
|
|
355 <dd>
|
|
|
356 <pre><code>$( ".selector" ).dialog({ dialogClass: 'alert' });</code></pre>
|
|
|
357 </dd>
|
|
|
358
|
|
|
359
|
|
|
360 <dt>
|
|
|
361 Get or set the <code>dialogClass</code> option, after init.
|
|
|
362 </dt>
|
|
|
363 <dd>
|
|
|
364 <pre><code>//getter
|
|
|
365 var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
|
|
|
366 //setter
|
|
|
367 $( ".selector" ).dialog( "option", "dialogClass", 'alert' );</code></pre>
|
|
|
368 </dd>
|
|
|
369
|
|
|
370 </dl>
|
|
|
371 </div>
|
|
|
372 </li>
|
|
|
373
|
|
|
374
|
|
|
375 <li class="option" id="option-draggable">
|
|
|
376 <div class="option-header">
|
|
|
377 <h3 class="option-name"><a href="#option-draggable">draggable</a></h3>
|
|
|
378 <dl>
|
|
|
379 <dt class="option-type-label">Type:</dt>
|
|
|
380 <dd class="option-type">Boolean</dd>
|
|
|
381
|
|
|
382 <dt class="option-default-label">Default:</dt>
|
|
|
383 <dd class="option-default">true</dd>
|
|
|
384
|
|
|
385 </dl>
|
|
|
386 </div>
|
|
|
387 <div class="option-description">
|
|
|
388 <p>If set to true, the dialog will be draggable will be draggable by the titlebar.</p>
|
|
|
389 </div>
|
|
|
390 <div class="option-examples">
|
|
|
391 <h4>Code examples</h4>
|
|
|
392 <dl class="option-examples-list">
|
|
|
393
|
|
|
394 <dt>
|
|
|
395 Initialize a dialog with the <code>draggable</code> option specified.
|
|
|
396 </dt>
|
|
|
397 <dd>
|
|
|
398 <pre><code>$( ".selector" ).dialog({ draggable: false });</code></pre>
|
|
|
399 </dd>
|
|
|
400
|
|
|
401
|
|
|
402 <dt>
|
|
|
403 Get or set the <code>draggable</code> option, after init.
|
|
|
404 </dt>
|
|
|
405 <dd>
|
|
|
406 <pre><code>//getter
|
|
|
407 var draggable = $( ".selector" ).dialog( "option", "draggable" );
|
|
|
408 //setter
|
|
|
409 $( ".selector" ).dialog( "option", "draggable", false );</code></pre>
|
|
|
410 </dd>
|
|
|
411
|
|
|
412 </dl>
|
|
|
413 </div>
|
|
|
414 </li>
|
|
|
415
|
|
|
416
|
|
|
417 <li class="option" id="option-height">
|
|
|
418 <div class="option-header">
|
|
|
419 <h3 class="option-name"><a href="#option-height">height</a></h3>
|
|
|
420 <dl>
|
|
|
421 <dt class="option-type-label">Type:</dt>
|
|
|
422 <dd class="option-type">Number</dd>
|
|
|
423
|
|
|
424 <dt class="option-default-label">Default:</dt>
|
|
|
425 <dd class="option-default">'auto'</dd>
|
|
|
426
|
|
|
427 </dl>
|
|
|
428 </div>
|
|
|
429 <div class="option-description">
|
|
|
430 <p>The height of the dialog, in pixels. Specifying 'auto' is also supported to make the dialog adjust based on its content.</p>
|
|
|
431 </div>
|
|
|
432 <div class="option-examples">
|
|
|
433 <h4>Code examples</h4>
|
|
|
434 <dl class="option-examples-list">
|
|
|
435
|
|
|
436 <dt>
|
|
|
437 Initialize a dialog with the <code>height</code> option specified.
|
|
|
438 </dt>
|
|
|
439 <dd>
|
|
|
440 <pre><code>$( ".selector" ).dialog({ height: 530 });</code></pre>
|
|
|
441 </dd>
|
|
|
442
|
|
|
443
|
|
|
444 <dt>
|
|
|
445 Get or set the <code>height</code> option, after init.
|
|
|
446 </dt>
|
|
|
447 <dd>
|
|
|
448 <pre><code>//getter
|
|
|
449 var height = $( ".selector" ).dialog( "option", "height" );
|
|
|
450 //setter
|
|
|
451 $( ".selector" ).dialog( "option", "height", 530 );</code></pre>
|
|
|
452 </dd>
|
|
|
453
|
|
|
454 </dl>
|
|
|
455 </div>
|
|
|
456 </li>
|
|
|
457
|
|
|
458
|
|
|
459 <li class="option" id="option-hide">
|
|
|
460 <div class="option-header">
|
|
|
461 <h3 class="option-name"><a href="#option-hide">hide</a></h3>
|
|
|
462 <dl>
|
|
|
463 <dt class="option-type-label">Type:</dt>
|
|
|
464 <dd class="option-type">String</dd>
|
|
|
465
|
|
|
466 <dt class="option-default-label">Default:</dt>
|
|
|
467 <dd class="option-default">null</dd>
|
|
|
468
|
|
|
469 </dl>
|
|
|
470 </div>
|
|
|
471 <div class="option-description">
|
|
|
472 <p>The effect to be used when the dialog is closed.</p>
|
|
|
473 </div>
|
|
|
474 <div class="option-examples">
|
|
|
475 <h4>Code examples</h4>
|
|
|
476 <dl class="option-examples-list">
|
|
|
477
|
|
|
478 <dt>
|
|
|
479 Initialize a dialog with the <code>hide</code> option specified.
|
|
|
480 </dt>
|
|
|
481 <dd>
|
|
|
482 <pre><code>$( ".selector" ).dialog({ hide: 'slide' });</code></pre>
|
|
|
483 </dd>
|
|
|
484
|
|
|
485
|
|
|
486 <dt>
|
|
|
487 Get or set the <code>hide</code> option, after init.
|
|
|
488 </dt>
|
|
|
489 <dd>
|
|
|
490 <pre><code>//getter
|
|
|
491 var hide = $( ".selector" ).dialog( "option", "hide" );
|
|
|
492 //setter
|
|
|
493 $( ".selector" ).dialog( "option", "hide", 'slide' );</code></pre>
|
|
|
494 </dd>
|
|
|
495
|
|
|
496 </dl>
|
|
|
497 </div>
|
|
|
498 </li>
|
|
|
499
|
|
|
500
|
|
|
501 <li class="option" id="option-maxHeight">
|
|
|
502 <div class="option-header">
|
|
|
503 <h3 class="option-name"><a href="#option-maxHeight">maxHeight</a></h3>
|
|
|
504 <dl>
|
|
|
505 <dt class="option-type-label">Type:</dt>
|
|
|
506 <dd class="option-type">Number</dd>
|
|
|
507
|
|
|
508 <dt class="option-default-label">Default:</dt>
|
|
|
509 <dd class="option-default">false</dd>
|
|
|
510
|
|
|
511 </dl>
|
|
|
512 </div>
|
|
|
513 <div class="option-description">
|
|
|
514 <p>The maximum height to which the dialog can be resized, in pixels.</p>
|
|
|
515 </div>
|
|
|
516 <div class="option-examples">
|
|
|
517 <h4>Code examples</h4>
|
|
|
518 <dl class="option-examples-list">
|
|
|
519
|
|
|
520 <dt>
|
|
|
521 Initialize a dialog with the <code>maxHeight</code> option specified.
|
|
|
522 </dt>
|
|
|
523 <dd>
|
|
|
524 <pre><code>$( ".selector" ).dialog({ maxHeight: 400 });</code></pre>
|
|
|
525 </dd>
|
|
|
526
|
|
|
527
|
|
|
528 <dt>
|
|
|
529 Get or set the <code>maxHeight</code> option, after init.
|
|
|
530 </dt>
|
|
|
531 <dd>
|
|
|
532 <pre><code>//getter
|
|
|
533 var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );
|
|
|
534 //setter
|
|
|
535 $( ".selector" ).dialog( "option", "maxHeight", 400 );</code></pre>
|
|
|
536 </dd>
|
|
|
537
|
|
|
538 </dl>
|
|
|
539 </div>
|
|
|
540 </li>
|
|
|
541
|
|
|
542
|
|
|
543 <li class="option" id="option-maxWidth">
|
|
|
544 <div class="option-header">
|
|
|
545 <h3 class="option-name"><a href="#option-maxWidth">maxWidth</a></h3>
|
|
|
546 <dl>
|
|
|
547 <dt class="option-type-label">Type:</dt>
|
|
|
548 <dd class="option-type">Number</dd>
|
|
|
549
|
|
|
550 <dt class="option-default-label">Default:</dt>
|
|
|
551 <dd class="option-default">false</dd>
|
|
|
552
|
|
|
553 </dl>
|
|
|
554 </div>
|
|
|
555 <div class="option-description">
|
|
|
556 <p>The maximum width to which the dialog can be resized, in pixels.</p>
|
|
|
557 </div>
|
|
|
558 <div class="option-examples">
|
|
|
559 <h4>Code examples</h4>
|
|
|
560 <dl class="option-examples-list">
|
|
|
561
|
|
|
562 <dt>
|
|
|
563 Initialize a dialog with the <code>maxWidth</code> option specified.
|
|
|
564 </dt>
|
|
|
565 <dd>
|
|
|
566 <pre><code>$( ".selector" ).dialog({ maxWidth: 600 });</code></pre>
|
|
|
567 </dd>
|
|
|
568
|
|
|
569
|
|
|
570 <dt>
|
|
|
571 Get or set the <code>maxWidth</code> option, after init.
|
|
|
572 </dt>
|
|
|
573 <dd>
|
|
|
574 <pre><code>//getter
|
|
|
575 var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );
|
|
|
576 //setter
|
|
|
577 $( ".selector" ).dialog( "option", "maxWidth", 600 );</code></pre>
|
|
|
578 </dd>
|
|
|
579
|
|
|
580 </dl>
|
|
|
581 </div>
|
|
|
582 </li>
|
|
|
583
|
|
|
584
|
|
|
585 <li class="option" id="option-minHeight">
|
|
|
586 <div class="option-header">
|
|
|
587 <h3 class="option-name"><a href="#option-minHeight">minHeight</a></h3>
|
|
|
588 <dl>
|
|
|
589 <dt class="option-type-label">Type:</dt>
|
|
|
590 <dd class="option-type">Number</dd>
|
|
|
591
|
|
|
592 <dt class="option-default-label">Default:</dt>
|
|
|
593 <dd class="option-default">150</dd>
|
|
|
594
|
|
|
595 </dl>
|
|
|
596 </div>
|
|
|
597 <div class="option-description">
|
|
|
598 <p>The minimum height to which the dialog can be resized, in pixels.</p>
|
|
|
599 </div>
|
|
|
600 <div class="option-examples">
|
|
|
601 <h4>Code examples</h4>
|
|
|
602 <dl class="option-examples-list">
|
|
|
603
|
|
|
604 <dt>
|
|
|
605 Initialize a dialog with the <code>minHeight</code> option specified.
|
|
|
606 </dt>
|
|
|
607 <dd>
|
|
|
608 <pre><code>$( ".selector" ).dialog({ minHeight: 300 });</code></pre>
|
|
|
609 </dd>
|
|
|
610
|
|
|
611
|
|
|
612 <dt>
|
|
|
613 Get or set the <code>minHeight</code> option, after init.
|
|
|
614 </dt>
|
|
|
615 <dd>
|
|
|
616 <pre><code>//getter
|
|
|
617 var minHeight = $( ".selector" ).dialog( "option", "minHeight" );
|
|
|
618 //setter
|
|
|
619 $( ".selector" ).dialog( "option", "minHeight", 300 );</code></pre>
|
|
|
620 </dd>
|
|
|
621
|
|
|
622 </dl>
|
|
|
623 </div>
|
|
|
624 </li>
|
|
|
625
|
|
|
626
|
|
|
627 <li class="option" id="option-minWidth">
|
|
|
628 <div class="option-header">
|
|
|
629 <h3 class="option-name"><a href="#option-minWidth">minWidth</a></h3>
|
|
|
630 <dl>
|
|
|
631 <dt class="option-type-label">Type:</dt>
|
|
|
632 <dd class="option-type">Number</dd>
|
|
|
633
|
|
|
634 <dt class="option-default-label">Default:</dt>
|
|
|
635 <dd class="option-default">150</dd>
|
|
|
636
|
|
|
637 </dl>
|
|
|
638 </div>
|
|
|
639 <div class="option-description">
|
|
|
640 <p>The minimum width to which the dialog can be resized, in pixels.</p>
|
|
|
641 </div>
|
|
|
642 <div class="option-examples">
|
|
|
643 <h4>Code examples</h4>
|
|
|
644 <dl class="option-examples-list">
|
|
|
645
|
|
|
646 <dt>
|
|
|
647 Initialize a dialog with the <code>minWidth</code> option specified.
|
|
|
648 </dt>
|
|
|
649 <dd>
|
|
|
650 <pre><code>$( ".selector" ).dialog({ minWidth: 400 });</code></pre>
|
|
|
651 </dd>
|
|
|
652
|
|
|
653
|
|
|
654 <dt>
|
|
|
655 Get or set the <code>minWidth</code> option, after init.
|
|
|
656 </dt>
|
|
|
657 <dd>
|
|
|
658 <pre><code>//getter
|
|
|
659 var minWidth = $( ".selector" ).dialog( "option", "minWidth" );
|
|
|
660 //setter
|
|
|
661 $( ".selector" ).dialog( "option", "minWidth", 400 );</code></pre>
|
|
|
662 </dd>
|
|
|
663
|
|
|
664 </dl>
|
|
|
665 </div>
|
|
|
666 </li>
|
|
|
667
|
|
|
668
|
|
|
669 <li class="option" id="option-modal">
|
|
|
670 <div class="option-header">
|
|
|
671 <h3 class="option-name"><a href="#option-modal">modal</a></h3>
|
|
|
672 <dl>
|
|
|
673 <dt class="option-type-label">Type:</dt>
|
|
|
674 <dd class="option-type">Boolean</dd>
|
|
|
675
|
|
|
676 <dt class="option-default-label">Default:</dt>
|
|
|
677 <dd class="option-default">false</dd>
|
|
|
678
|
|
|
679 </dl>
|
|
|
680 </div>
|
|
|
681 <div class="option-description">
|
|
|
682 <p>If set to true, 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.</p>
|
|
|
683 </div>
|
|
|
684 <div class="option-examples">
|
|
|
685 <h4>Code examples</h4>
|
|
|
686 <dl class="option-examples-list">
|
|
|
687
|
|
|
688 <dt>
|
|
|
689 Initialize a dialog with the <code>modal</code> option specified.
|
|
|
690 </dt>
|
|
|
691 <dd>
|
|
|
692 <pre><code>$( ".selector" ).dialog({ modal: true });</code></pre>
|
|
|
693 </dd>
|
|
|
694
|
|
|
695
|
|
|
696 <dt>
|
|
|
697 Get or set the <code>modal</code> option, after init.
|
|
|
698 </dt>
|
|
|
699 <dd>
|
|
|
700 <pre><code>//getter
|
|
|
701 var modal = $( ".selector" ).dialog( "option", "modal" );
|
|
|
702 //setter
|
|
|
703 $( ".selector" ).dialog( "option", "modal", true );</code></pre>
|
|
|
704 </dd>
|
|
|
705
|
|
|
706 </dl>
|
|
|
707 </div>
|
|
|
708 </li>
|
|
|
709
|
|
|
710
|
|
|
711 <li class="option" id="option-position">
|
|
|
712 <div class="option-header">
|
|
|
713 <h3 class="option-name"><a href="#option-position">position</a></h3>
|
|
|
714 <dl>
|
|
|
715 <dt class="option-type-label">Type:</dt>
|
|
|
716 <dd class="option-type">String, Array</dd>
|
|
|
717
|
|
|
718 <dt class="option-default-label">Default:</dt>
|
|
|
719 <dd class="option-default">'center'</dd>
|
|
|
720
|
|
|
721 </dl>
|
|
|
722 </div>
|
|
|
723 <div class="option-description">
|
|
|
724 <p>Specifies where the dialog should be displayed. Possible values: <br />1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'. <br />2) an array containing an <em>x,y</em> coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100]) <br />3) an array containing <em>x,y</em> position string values (e.g. ['right','top'] for top right corner).</p>
|
|
|
725 </div>
|
|
|
726 <div class="option-examples">
|
|
|
727 <h4>Code examples</h4>
|
|
|
728 <dl class="option-examples-list">
|
|
|
729
|
|
|
730 <dt>
|
|
|
731 Initialize a dialog with the <code>position</code> option specified.
|
|
|
732 </dt>
|
|
|
733 <dd>
|
|
|
734 <pre><code>$( ".selector" ).dialog({ position: 'top' });</code></pre>
|
|
|
735 </dd>
|
|
|
736
|
|
|
737
|
|
|
738 <dt>
|
|
|
739 Get or set the <code>position</code> option, after init.
|
|
|
740 </dt>
|
|
|
741 <dd>
|
|
|
742 <pre><code>//getter
|
|
|
743 var position = $( ".selector" ).dialog( "option", "position" );
|
|
|
744 //setter
|
|
|
745 $( ".selector" ).dialog( "option", "position", 'top' );</code></pre>
|
|
|
746 </dd>
|
|
|
747
|
|
|
748 </dl>
|
|
|
749 </div>
|
|
|
750 </li>
|
|
|
751
|
|
|
752
|
|
|
753 <li class="option" id="option-resizable">
|
|
|
754 <div class="option-header">
|
|
|
755 <h3 class="option-name"><a href="#option-resizable">resizable</a></h3>
|
|
|
756 <dl>
|
|
|
757 <dt class="option-type-label">Type:</dt>
|
|
|
758 <dd class="option-type">Boolean</dd>
|
|
|
759
|
|
|
760 <dt class="option-default-label">Default:</dt>
|
|
|
761 <dd class="option-default">true</dd>
|
|
|
762
|
|
|
763 </dl>
|
|
|
764 </div>
|
|
|
765 <div class="option-description">
|
|
|
766 <p>If set to true, the dialog will be resizeable.</p>
|
|
|
767 </div>
|
|
|
768 <div class="option-examples">
|
|
|
769 <h4>Code examples</h4>
|
|
|
770 <dl class="option-examples-list">
|
|
|
771
|
|
|
772 <dt>
|
|
|
773 Initialize a dialog with the <code>resizable</code> option specified.
|
|
|
774 </dt>
|
|
|
775 <dd>
|
|
|
776 <pre><code>$( ".selector" ).dialog({ resizable: false });</code></pre>
|
|
|
777 </dd>
|
|
|
778
|
|
|
779
|
|
|
780 <dt>
|
|
|
781 Get or set the <code>resizable</code> option, after init.
|
|
|
782 </dt>
|
|
|
783 <dd>
|
|
|
784 <pre><code>//getter
|
|
|
785 var resizable = $( ".selector" ).dialog( "option", "resizable" );
|
|
|
786 //setter
|
|
|
787 $( ".selector" ).dialog( "option", "resizable", false );</code></pre>
|
|
|
788 </dd>
|
|
|
789
|
|
|
790 </dl>
|
|
|
791 </div>
|
|
|
792 </li>
|
|
|
793
|
|
|
794
|
|
|
795 <li class="option" id="option-show">
|
|
|
796 <div class="option-header">
|
|
|
797 <h3 class="option-name"><a href="#option-show">show</a></h3>
|
|
|
798 <dl>
|
|
|
799 <dt class="option-type-label">Type:</dt>
|
|
|
800 <dd class="option-type">String</dd>
|
|
|
801
|
|
|
802 <dt class="option-default-label">Default:</dt>
|
|
|
803 <dd class="option-default">null</dd>
|
|
|
804
|
|
|
805 </dl>
|
|
|
806 </div>
|
|
|
807 <div class="option-description">
|
|
|
808 <p>The effect to be used when the dialog is opened.</p>
|
|
|
809 </div>
|
|
|
810 <div class="option-examples">
|
|
|
811 <h4>Code examples</h4>
|
|
|
812 <dl class="option-examples-list">
|
|
|
813
|
|
|
814 <dt>
|
|
|
815 Initialize a dialog with the <code>show</code> option specified.
|
|
|
816 </dt>
|
|
|
817 <dd>
|
|
|
818 <pre><code>$( ".selector" ).dialog({ show: 'slide' });</code></pre>
|
|
|
819 </dd>
|
|
|
820
|
|
|
821
|
|
|
822 <dt>
|
|
|
823 Get or set the <code>show</code> option, after init.
|
|
|
824 </dt>
|
|
|
825 <dd>
|
|
|
826 <pre><code>//getter
|
|
|
827 var show = $( ".selector" ).dialog( "option", "show" );
|
|
|
828 //setter
|
|
|
829 $( ".selector" ).dialog( "option", "show", 'slide' );</code></pre>
|
|
|
830 </dd>
|
|
|
831
|
|
|
832 </dl>
|
|
|
833 </div>
|
|
|
834 </li>
|
|
|
835
|
|
|
836
|
|
|
837 <li class="option" id="option-stack">
|
|
|
838 <div class="option-header">
|
|
|
839 <h3 class="option-name"><a href="#option-stack">stack</a></h3>
|
|
|
840 <dl>
|
|
|
841 <dt class="option-type-label">Type:</dt>
|
|
|
842 <dd class="option-type">Boolean</dd>
|
|
|
843
|
|
|
844 <dt class="option-default-label">Default:</dt>
|
|
|
845 <dd class="option-default">true</dd>
|
|
|
846
|
|
|
847 </dl>
|
|
|
848 </div>
|
|
|
849 <div class="option-description">
|
|
|
850 <p>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.</p>
|
|
|
851 </div>
|
|
|
852 <div class="option-examples">
|
|
|
853 <h4>Code examples</h4>
|
|
|
854 <dl class="option-examples-list">
|
|
|
855
|
|
|
856 <dt>
|
|
|
857 Initialize a dialog with the <code>stack</code> option specified.
|
|
|
858 </dt>
|
|
|
859 <dd>
|
|
|
860 <pre><code>$( ".selector" ).dialog({ stack: false });</code></pre>
|
|
|
861 </dd>
|
|
|
862
|
|
|
863
|
|
|
864 <dt>
|
|
|
865 Get or set the <code>stack</code> option, after init.
|
|
|
866 </dt>
|
|
|
867 <dd>
|
|
|
868 <pre><code>//getter
|
|
|
869 var stack = $( ".selector" ).dialog( "option", "stack" );
|
|
|
870 //setter
|
|
|
871 $( ".selector" ).dialog( "option", "stack", false );</code></pre>
|
|
|
872 </dd>
|
|
|
873
|
|
|
874 </dl>
|
|
|
875 </div>
|
|
|
876 </li>
|
|
|
877
|
|
|
878
|
|
|
879 <li class="option" id="option-title">
|
|
|
880 <div class="option-header">
|
|
|
881 <h3 class="option-name"><a href="#option-title">title</a></h3>
|
|
|
882 <dl>
|
|
|
883 <dt class="option-type-label">Type:</dt>
|
|
|
884 <dd class="option-type">String</dd>
|
|
|
885
|
|
|
886 <dt class="option-default-label">Default:</dt>
|
|
|
887 <dd class="option-default">''</dd>
|
|
|
888
|
|
|
889 </dl>
|
|
|
890 </div>
|
|
|
891 <div class="option-description">
|
|
|
892 <p>Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the title attribute on the dialog source element.</p>
|
|
|
893 </div>
|
|
|
894 <div class="option-examples">
|
|
|
895 <h4>Code examples</h4>
|
|
|
896 <dl class="option-examples-list">
|
|
|
897
|
|
|
898 <dt>
|
|
|
899 Initialize a dialog with the <code>title</code> option specified.
|
|
|
900 </dt>
|
|
|
901 <dd>
|
|
|
902 <pre><code>$( ".selector" ).dialog({ title: 'Dialog Title' });</code></pre>
|
|
|
903 </dd>
|
|
|
904
|
|
|
905
|
|
|
906 <dt>
|
|
|
907 Get or set the <code>title</code> option, after init.
|
|
|
908 </dt>
|
|
|
909 <dd>
|
|
|
910 <pre><code>//getter
|
|
|
911 var title = $( ".selector" ).dialog( "option", "title" );
|
|
|
912 //setter
|
|
|
913 $( ".selector" ).dialog( "option", "title", 'Dialog Title' );</code></pre>
|
|
|
914 </dd>
|
|
|
915
|
|
|
916 </dl>
|
|
|
917 </div>
|
|
|
918 </li>
|
|
|
919
|
|
|
920
|
|
|
921 <li class="option" id="option-width">
|
|
|
922 <div class="option-header">
|
|
|
923 <h3 class="option-name"><a href="#option-width">width</a></h3>
|
|
|
924 <dl>
|
|
|
925 <dt class="option-type-label">Type:</dt>
|
|
|
926 <dd class="option-type">Number</dd>
|
|
|
927
|
|
|
928 <dt class="option-default-label">Default:</dt>
|
|
|
929 <dd class="option-default">300</dd>
|
|
|
930
|
|
|
931 </dl>
|
|
|
932 </div>
|
|
|
933 <div class="option-description">
|
|
|
934 <p>The width of the dialog, in pixels.</p>
|
|
|
935 </div>
|
|
|
936 <div class="option-examples">
|
|
|
937 <h4>Code examples</h4>
|
|
|
938 <dl class="option-examples-list">
|
|
|
939
|
|
|
940 <dt>
|
|
|
941 Initialize a dialog with the <code>width</code> option specified.
|
|
|
942 </dt>
|
|
|
943 <dd>
|
|
|
944 <pre><code>$( ".selector" ).dialog({ width: 460 });</code></pre>
|
|
|
945 </dd>
|
|
|
946
|
|
|
947
|
|
|
948 <dt>
|
|
|
949 Get or set the <code>width</code> option, after init.
|
|
|
950 </dt>
|
|
|
951 <dd>
|
|
|
952 <pre><code>//getter
|
|
|
953 var width = $( ".selector" ).dialog( "option", "width" );
|
|
|
954 //setter
|
|
|
955 $( ".selector" ).dialog( "option", "width", 460 );</code></pre>
|
|
|
956 </dd>
|
|
|
957
|
|
|
958 </dl>
|
|
|
959 </div>
|
|
|
960 </li>
|
|
|
961
|
|
|
962
|
|
|
963 <li class="option" id="option-zIndex">
|
|
|
964 <div class="option-header">
|
|
|
965 <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
|
|
|
966 <dl>
|
|
|
967 <dt class="option-type-label">Type:</dt>
|
|
|
968 <dd class="option-type">Integer</dd>
|
|
|
969
|
|
|
970 <dt class="option-default-label">Default:</dt>
|
|
|
971 <dd class="option-default">1000</dd>
|
|
|
972
|
|
|
973 </dl>
|
|
|
974 </div>
|
|
|
975 <div class="option-description">
|
|
|
976 <p>The starting z-index for the dialog.</p>
|
|
|
977 </div>
|
|
|
978 <div class="option-examples">
|
|
|
979 <h4>Code examples</h4>
|
|
|
980 <dl class="option-examples-list">
|
|
|
981
|
|
|
982 <dt>
|
|
|
983 Initialize a dialog with the <code>zIndex</code> option specified.
|
|
|
984 </dt>
|
|
|
985 <dd>
|
|
|
986 <pre><code>$( ".selector" ).dialog({ zIndex: 3999 });</code></pre>
|
|
|
987 </dd>
|
|
|
988
|
|
|
989
|
|
|
990 <dt>
|
|
|
991 Get or set the <code>zIndex</code> option, after init.
|
|
|
992 </dt>
|
|
|
993 <dd>
|
|
|
994 <pre><code>//getter
|
|
|
995 var zIndex = $( ".selector" ).dialog( "option", "zIndex" );
|
|
|
996 //setter
|
|
|
997 $( ".selector" ).dialog( "option", "zIndex", 3999 );</code></pre>
|
|
|
998 </dd>
|
|
|
999
|
|
|
1000 </dl>
|
|
|
1001 </div>
|
|
|
1002 </li>
|
|
|
1003
|
|
|
1004 </ul>
|
|
|
1005 </div>
|
|
|
1006 <div id="events">
|
|
|
1007 <h2 class="top-header">Events</h2>
|
|
|
1008 <ul class="events-list">
|
|
|
1009
|
|
|
1010 <li class="event" id="event-create">
|
|
|
1011 <div class="event-header">
|
|
|
1012 <h3 class="event-name"><a href="#event-create">create</a></h3>
|
|
|
1013 <dl>
|
|
|
1014 <dt class="event-type-label">Type:</dt>
|
|
|
1015 <dd class="event-type">dialogcreate</dd>
|
|
|
1016 </dl>
|
|
|
1017 </div>
|
|
|
1018 <div class="event-description">
|
|
|
1019 <p>This event is triggered when dialog is created.</p>
|
|
|
1020 </div>
|
|
|
1021 <div class="event-examples">
|
|
|
1022 <h4>Code examples</h4>
|
|
|
1023 <dl class="event-examples-list">
|
|
|
1024
|
|
|
1025 <dt>
|
|
|
1026 Supply a callback function to handle the <code>create</code> event as an init option.
|
|
|
1027 </dt>
|
|
|
1028 <dd>
|
|
|
1029 <pre><code>$( ".selector" ).dialog({
|
|
|
1030 create: function(event, ui) { ... }
|
|
|
1031 });</code></pre>
|
|
|
1032 </dd>
|
|
|
1033
|
|
|
1034
|
|
|
1035 <dt>
|
|
|
1036 Bind to the <code>create</code> event by type: <code>dialogcreate</code>.
|
|
|
1037 </dt>
|
|
|
1038 <dd>
|
|
|
1039 <pre><code>$( ".selector" ).bind( "dialogcreate", function(event, ui) {
|
|
|
1040 ...
|
|
|
1041 });</code></pre>
|
|
|
1042 </dd>
|
|
|
1043
|
|
|
1044 </dl>
|
|
|
1045 </div>
|
|
|
1046 </li>
|
|
|
1047
|
|
|
1048
|
|
|
1049 <li class="event" id="event-beforeClose">
|
|
|
1050 <div class="event-header">
|
|
|
1051 <h3 class="event-name"><a href="#event-beforeClose">beforeClose</a></h3>
|
|
|
1052 <dl>
|
|
|
1053 <dt class="event-type-label">Type:</dt>
|
|
|
1054 <dd class="event-type">dialogbeforeclose</dd>
|
|
|
1055 </dl>
|
|
|
1056 </div>
|
|
|
1057 <div class="event-description">
|
|
|
1058 <p>This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.</p>
|
|
|
1059 </div>
|
|
|
1060 <div class="event-examples">
|
|
|
1061 <h4>Code examples</h4>
|
|
|
1062 <dl class="event-examples-list">
|
|
|
1063
|
|
|
1064 <dt>
|
|
|
1065 Supply a callback function to handle the <code>beforeClose</code> event as an init option.
|
|
|
1066 </dt>
|
|
|
1067 <dd>
|
|
|
1068 <pre><code>$( ".selector" ).dialog({
|
|
|
1069 beforeClose: function(event, ui) { ... }
|
|
|
1070 });</code></pre>
|
|
|
1071 </dd>
|
|
|
1072
|
|
|
1073
|
|
|
1074 <dt>
|
|
|
1075 Bind to the <code>beforeClose</code> event by type: <code>dialogbeforeclose</code>.
|
|
|
1076 </dt>
|
|
|
1077 <dd>
|
|
|
1078 <pre><code>$( ".selector" ).bind( "dialogbeforeclose", function(event, ui) {
|
|
|
1079 ...
|
|
|
1080 });</code></pre>
|
|
|
1081 </dd>
|
|
|
1082
|
|
|
1083 </dl>
|
|
|
1084 </div>
|
|
|
1085 </li>
|
|
|
1086
|
|
|
1087
|
|
|
1088 <li class="event" id="event-open">
|
|
|
1089 <div class="event-header">
|
|
|
1090 <h3 class="event-name"><a href="#event-open">open</a></h3>
|
|
|
1091 <dl>
|
|
|
1092 <dt class="event-type-label">Type:</dt>
|
|
|
1093 <dd class="event-type">dialogopen</dd>
|
|
|
1094 </dl>
|
|
|
1095 </div>
|
|
|
1096 <div class="event-description">
|
|
|
1097 <p>This event is triggered when dialog is opened.</p>
|
|
|
1098 </div>
|
|
|
1099 <div class="event-examples">
|
|
|
1100 <h4>Code examples</h4>
|
|
|
1101 <dl class="event-examples-list">
|
|
|
1102
|
|
|
1103 <dt>
|
|
|
1104 Supply a callback function to handle the <code>open</code> event as an init option.
|
|
|
1105 </dt>
|
|
|
1106 <dd>
|
|
|
1107 <pre><code>$( ".selector" ).dialog({
|
|
|
1108 open: function(event, ui) { ... }
|
|
|
1109 });</code></pre>
|
|
|
1110 </dd>
|
|
|
1111
|
|
|
1112
|
|
|
1113 <dt>
|
|
|
1114 Bind to the <code>open</code> event by type: <code>dialogopen</code>.
|
|
|
1115 </dt>
|
|
|
1116 <dd>
|
|
|
1117 <pre><code>$( ".selector" ).bind( "dialogopen", function(event, ui) {
|
|
|
1118 ...
|
|
|
1119 });</code></pre>
|
|
|
1120 </dd>
|
|
|
1121
|
|
|
1122 </dl>
|
|
|
1123 </div>
|
|
|
1124 </li>
|
|
|
1125
|
|
|
1126
|
|
|
1127 <li class="event" id="event-focus">
|
|
|
1128 <div class="event-header">
|
|
|
1129 <h3 class="event-name"><a href="#event-focus">focus</a></h3>
|
|
|
1130 <dl>
|
|
|
1131 <dt class="event-type-label">Type:</dt>
|
|
|
1132 <dd class="event-type">dialogfocus</dd>
|
|
|
1133 </dl>
|
|
|
1134 </div>
|
|
|
1135 <div class="event-description">
|
|
|
1136 <p>This event is triggered when the dialog gains focus.</p>
|
|
|
1137 </div>
|
|
|
1138 <div class="event-examples">
|
|
|
1139 <h4>Code examples</h4>
|
|
|
1140 <dl class="event-examples-list">
|
|
|
1141
|
|
|
1142 <dt>
|
|
|
1143 Supply a callback function to handle the <code>focus</code> event as an init option.
|
|
|
1144 </dt>
|
|
|
1145 <dd>
|
|
|
1146 <pre><code>$( ".selector" ).dialog({
|
|
|
1147 focus: function(event, ui) { ... }
|
|
|
1148 });</code></pre>
|
|
|
1149 </dd>
|
|
|
1150
|
|
|
1151
|
|
|
1152 <dt>
|
|
|
1153 Bind to the <code>focus</code> event by type: <code>dialogfocus</code>.
|
|
|
1154 </dt>
|
|
|
1155 <dd>
|
|
|
1156 <pre><code>$( ".selector" ).bind( "dialogfocus", function(event, ui) {
|
|
|
1157 ...
|
|
|
1158 });</code></pre>
|
|
|
1159 </dd>
|
|
|
1160
|
|
|
1161 </dl>
|
|
|
1162 </div>
|
|
|
1163 </li>
|
|
|
1164
|
|
|
1165
|
|
|
1166 <li class="event" id="event-dragStart">
|
|
|
1167 <div class="event-header">
|
|
|
1168 <h3 class="event-name"><a href="#event-dragStart">dragStart</a></h3>
|
|
|
1169 <dl>
|
|
|
1170 <dt class="event-type-label">Type:</dt>
|
|
|
1171 <dd class="event-type">dialogdragstart</dd>
|
|
|
1172 </dl>
|
|
|
1173 </div>
|
|
|
1174 <div class="event-description">
|
|
|
1175 <p>This event is triggered at the beginning of the dialog being dragged.</p>
|
|
|
1176 </div>
|
|
|
1177 <div class="event-examples">
|
|
|
1178 <h4>Code examples</h4>
|
|
|
1179 <dl class="event-examples-list">
|
|
|
1180
|
|
|
1181 <dt>
|
|
|
1182 Supply a callback function to handle the <code>dragStart</code> event as an init option.
|
|
|
1183 </dt>
|
|
|
1184 <dd>
|
|
|
1185 <pre><code>$( ".selector" ).dialog({
|
|
|
1186 dragStart: function(event, ui) { ... }
|
|
|
1187 });</code></pre>
|
|
|
1188 </dd>
|
|
|
1189
|
|
|
1190
|
|
|
1191 <dt>
|
|
|
1192 Bind to the <code>dragStart</code> event by type: <code>dialogdragstart</code>.
|
|
|
1193 </dt>
|
|
|
1194 <dd>
|
|
|
1195 <pre><code>$( ".selector" ).bind( "dialogdragstart", function(event, ui) {
|
|
|
1196 ...
|
|
|
1197 });</code></pre>
|
|
|
1198 </dd>
|
|
|
1199
|
|
|
1200 </dl>
|
|
|
1201 </div>
|
|
|
1202 </li>
|
|
|
1203
|
|
|
1204
|
|
|
1205 <li class="event" id="event-drag">
|
|
|
1206 <div class="event-header">
|
|
|
1207 <h3 class="event-name"><a href="#event-drag">drag</a></h3>
|
|
|
1208 <dl>
|
|
|
1209 <dt class="event-type-label">Type:</dt>
|
|
|
1210 <dd class="event-type">dialogdrag</dd>
|
|
|
1211 </dl>
|
|
|
1212 </div>
|
|
|
1213 <div class="event-description">
|
|
|
1214 <p>This event is triggered when the dialog is dragged.</p>
|
|
|
1215 </div>
|
|
|
1216 <div class="event-examples">
|
|
|
1217 <h4>Code examples</h4>
|
|
|
1218 <dl class="event-examples-list">
|
|
|
1219
|
|
|
1220 <dt>
|
|
|
1221 Supply a callback function to handle the <code>drag</code> event as an init option.
|
|
|
1222 </dt>
|
|
|
1223 <dd>
|
|
|
1224 <pre><code>$( ".selector" ).dialog({
|
|
|
1225 drag: function(event, ui) { ... }
|
|
|
1226 });</code></pre>
|
|
|
1227 </dd>
|
|
|
1228
|
|
|
1229
|
|
|
1230 <dt>
|
|
|
1231 Bind to the <code>drag</code> event by type: <code>dialogdrag</code>.
|
|
|
1232 </dt>
|
|
|
1233 <dd>
|
|
|
1234 <pre><code>$( ".selector" ).bind( "dialogdrag", function(event, ui) {
|
|
|
1235 ...
|
|
|
1236 });</code></pre>
|
|
|
1237 </dd>
|
|
|
1238
|
|
|
1239 </dl>
|
|
|
1240 </div>
|
|
|
1241 </li>
|
|
|
1242
|
|
|
1243
|
|
|
1244 <li class="event" id="event-dragStop">
|
|
|
1245 <div class="event-header">
|
|
|
1246 <h3 class="event-name"><a href="#event-dragStop">dragStop</a></h3>
|
|
|
1247 <dl>
|
|
|
1248 <dt class="event-type-label">Type:</dt>
|
|
|
1249 <dd class="event-type">dialogdragstop</dd>
|
|
|
1250 </dl>
|
|
|
1251 </div>
|
|
|
1252 <div class="event-description">
|
|
|
1253 <p>This event is triggered after the dialog has been dragged.</p>
|
|
|
1254 </div>
|
|
|
1255 <div class="event-examples">
|
|
|
1256 <h4>Code examples</h4>
|
|
|
1257 <dl class="event-examples-list">
|
|
|
1258
|
|
|
1259 <dt>
|
|
|
1260 Supply a callback function to handle the <code>dragStop</code> event as an init option.
|
|
|
1261 </dt>
|
|
|
1262 <dd>
|
|
|
1263 <pre><code>$( ".selector" ).dialog({
|
|
|
1264 dragStop: function(event, ui) { ... }
|
|
|
1265 });</code></pre>
|
|
|
1266 </dd>
|
|
|
1267
|
|
|
1268
|
|
|
1269 <dt>
|
|
|
1270 Bind to the <code>dragStop</code> event by type: <code>dialogdragstop</code>.
|
|
|
1271 </dt>
|
|
|
1272 <dd>
|
|
|
1273 <pre><code>$( ".selector" ).bind( "dialogdragstop", function(event, ui) {
|
|
|
1274 ...
|
|
|
1275 });</code></pre>
|
|
|
1276 </dd>
|
|
|
1277
|
|
|
1278 </dl>
|
|
|
1279 </div>
|
|
|
1280 </li>
|
|
|
1281
|
|
|
1282
|
|
|
1283 <li class="event" id="event-resizeStart">
|
|
|
1284 <div class="event-header">
|
|
|
1285 <h3 class="event-name"><a href="#event-resizeStart">resizeStart</a></h3>
|
|
|
1286 <dl>
|
|
|
1287 <dt class="event-type-label">Type:</dt>
|
|
|
1288 <dd class="event-type">dialogresizestart</dd>
|
|
|
1289 </dl>
|
|
|
1290 </div>
|
|
|
1291 <div class="event-description">
|
|
|
1292 <p>This event is triggered at the beginning of the dialog being resized.</p>
|
|
|
1293 </div>
|
|
|
1294 <div class="event-examples">
|
|
|
1295 <h4>Code examples</h4>
|
|
|
1296 <dl class="event-examples-list">
|
|
|
1297
|
|
|
1298 <dt>
|
|
|
1299 Supply a callback function to handle the <code>resizeStart</code> event as an init option.
|
|
|
1300 </dt>
|
|
|
1301 <dd>
|
|
|
1302 <pre><code>$( ".selector" ).dialog({
|
|
|
1303 resizeStart: function(event, ui) { ... }
|
|
|
1304 });</code></pre>
|
|
|
1305 </dd>
|
|
|
1306
|
|
|
1307
|
|
|
1308 <dt>
|
|
|
1309 Bind to the <code>resizeStart</code> event by type: <code>dialogresizestart</code>.
|
|
|
1310 </dt>
|
|
|
1311 <dd>
|
|
|
1312 <pre><code>$( ".selector" ).bind( "dialogresizestart", function(event, ui) {
|
|
|
1313 ...
|
|
|
1314 });</code></pre>
|
|
|
1315 </dd>
|
|
|
1316
|
|
|
1317 </dl>
|
|
|
1318 </div>
|
|
|
1319 </li>
|
|
|
1320
|
|
|
1321
|
|
|
1322 <li class="event" id="event-resize">
|
|
|
1323 <div class="event-header">
|
|
|
1324 <h3 class="event-name"><a href="#event-resize">resize</a></h3>
|
|
|
1325 <dl>
|
|
|
1326 <dt class="event-type-label">Type:</dt>
|
|
|
1327 <dd class="event-type">dialogresize</dd>
|
|
|
1328 </dl>
|
|
|
1329 </div>
|
|
|
1330 <div class="event-description">
|
|
|
1331 <p>This event is triggered when the dialog is resized. <a href="http://www.jsfiddle.net/Jp7TM/18/" class="external text" title="http://www.jsfiddle.net/Jp7TM/18/">demo</a></p>
|
|
|
1332 </div>
|
|
|
1333 <div class="event-examples">
|
|
|
1334 <h4>Code examples</h4>
|
|
|
1335 <dl class="event-examples-list">
|
|
|
1336
|
|
|
1337 <dt>
|
|
|
1338 Supply a callback function to handle the <code>resize</code> event as an init option.
|
|
|
1339 </dt>
|
|
|
1340 <dd>
|
|
|
1341 <pre><code>$( ".selector" ).dialog({
|
|
|
1342 resize: function(event, ui) { ... }
|
|
|
1343 });</code></pre>
|
|
|
1344 </dd>
|
|
|
1345
|
|
|
1346
|
|
|
1347 <dt>
|
|
|
1348 Bind to the <code>resize</code> event by type: <code>dialogresize</code>.
|
|
|
1349 </dt>
|
|
|
1350 <dd>
|
|
|
1351 <pre><code>$( ".selector" ).bind( "dialogresize", function(event, ui) {
|
|
|
1352 ...
|
|
|
1353 });</code></pre>
|
|
|
1354 </dd>
|
|
|
1355
|
|
|
1356 </dl>
|
|
|
1357 </div>
|
|
|
1358 </li>
|
|
|
1359
|
|
|
1360
|
|
|
1361 <li class="event" id="event-resizeStop">
|
|
|
1362 <div class="event-header">
|
|
|
1363 <h3 class="event-name"><a href="#event-resizeStop">resizeStop</a></h3>
|
|
|
1364 <dl>
|
|
|
1365 <dt class="event-type-label">Type:</dt>
|
|
|
1366 <dd class="event-type">dialogresizestop</dd>
|
|
|
1367 </dl>
|
|
|
1368 </div>
|
|
|
1369 <div class="event-description">
|
|
|
1370 <p>This event is triggered after the dialog has been resized.</p>
|
|
|
1371 </div>
|
|
|
1372 <div class="event-examples">
|
|
|
1373 <h4>Code examples</h4>
|
|
|
1374 <dl class="event-examples-list">
|
|
|
1375
|
|
|
1376 <dt>
|
|
|
1377 Supply a callback function to handle the <code>resizeStop</code> event as an init option.
|
|
|
1378 </dt>
|
|
|
1379 <dd>
|
|
|
1380 <pre><code>$( ".selector" ).dialog({
|
|
|
1381 resizeStop: function(event, ui) { ... }
|
|
|
1382 });</code></pre>
|
|
|
1383 </dd>
|
|
|
1384
|
|
|
1385
|
|
|
1386 <dt>
|
|
|
1387 Bind to the <code>resizeStop</code> event by type: <code>dialogresizestop</code>.
|
|
|
1388 </dt>
|
|
|
1389 <dd>
|
|
|
1390 <pre><code>$( ".selector" ).bind( "dialogresizestop", function(event, ui) {
|
|
|
1391 ...
|
|
|
1392 });</code></pre>
|
|
|
1393 </dd>
|
|
|
1394
|
|
|
1395 </dl>
|
|
|
1396 </div>
|
|
|
1397 </li>
|
|
|
1398
|
|
|
1399
|
|
|
1400 <li class="event" id="event-close">
|
|
|
1401 <div class="event-header">
|
|
|
1402 <h3 class="event-name"><a href="#event-close">close</a></h3>
|
|
|
1403 <dl>
|
|
|
1404 <dt class="event-type-label">Type:</dt>
|
|
|
1405 <dd class="event-type">dialogclose</dd>
|
|
|
1406 </dl>
|
|
|
1407 </div>
|
|
|
1408 <div class="event-description">
|
|
|
1409 <p>This event is triggered when the dialog is closed.</p>
|
|
|
1410 </div>
|
|
|
1411 <div class="event-examples">
|
|
|
1412 <h4>Code examples</h4>
|
|
|
1413 <dl class="event-examples-list">
|
|
|
1414
|
|
|
1415 <dt>
|
|
|
1416 Supply a callback function to handle the <code>close</code> event as an init option.
|
|
|
1417 </dt>
|
|
|
1418 <dd>
|
|
|
1419 <pre><code>$( ".selector" ).dialog({
|
|
|
1420 close: function(event, ui) { ... }
|
|
|
1421 });</code></pre>
|
|
|
1422 </dd>
|
|
|
1423
|
|
|
1424
|
|
|
1425 <dt>
|
|
|
1426 Bind to the <code>close</code> event by type: <code>dialogclose</code>.
|
|
|
1427 </dt>
|
|
|
1428 <dd>
|
|
|
1429 <pre><code>$( ".selector" ).bind( "dialogclose", function(event, ui) {
|
|
|
1430 ...
|
|
|
1431 });</code></pre>
|
|
|
1432 </dd>
|
|
|
1433
|
|
|
1434 </dl>
|
|
|
1435 </div>
|
|
|
1436 </li>
|
|
|
1437
|
|
|
1438 </ul>
|
|
|
1439 </div>
|
|
|
1440 <div id="methods">
|
|
|
1441 <h2 class="top-header">Methods</h2>
|
|
|
1442 <ul class="methods-list">
|
|
|
1443
|
|
|
1444 <li class="method" id="method-destroy">
|
|
|
1445 <div class="method-header">
|
|
|
1446 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
|
|
|
1447 <dl>
|
|
|
1448 <dt class="method-signature-label">Signature:</dt>
|
|
|
1449 <dd class="method-signature">.dialog( "destroy"
|
|
|
1450
|
|
|
1451
|
|
|
1452
|
|
|
1453
|
|
|
1454
|
|
|
1455
|
|
|
1456
|
|
|
1457 )</dd>
|
|
|
1458 </dl>
|
|
|
1459 </div>
|
|
|
1460 <div class="method-description">
|
|
|
1461 <p>Remove the dialog functionality completely. This will return the element back to its pre-init state.</p>
|
|
|
1462 </div>
|
|
|
1463 </li>
|
|
|
1464
|
|
|
1465
|
|
|
1466 <li class="method" id="method-disable">
|
|
|
1467 <div class="method-header">
|
|
|
1468 <h3 class="method-name"><a href="#method-disable">disable</a></h3>
|
|
|
1469 <dl>
|
|
|
1470 <dt class="method-signature-label">Signature:</dt>
|
|
|
1471 <dd class="method-signature">.dialog( "disable"
|
|
|
1472
|
|
|
1473
|
|
|
1474
|
|
|
1475
|
|
|
1476
|
|
|
1477
|
|
|
1478
|
|
|
1479 )</dd>
|
|
|
1480 </dl>
|
|
|
1481 </div>
|
|
|
1482 <div class="method-description">
|
|
|
1483 <p>Disable the dialog.</p>
|
|
|
1484 </div>
|
|
|
1485 </li>
|
|
|
1486
|
|
|
1487
|
|
|
1488 <li class="method" id="method-enable">
|
|
|
1489 <div class="method-header">
|
|
|
1490 <h3 class="method-name"><a href="#method-enable">enable</a></h3>
|
|
|
1491 <dl>
|
|
|
1492 <dt class="method-signature-label">Signature:</dt>
|
|
|
1493 <dd class="method-signature">.dialog( "enable"
|
|
|
1494
|
|
|
1495
|
|
|
1496
|
|
|
1497
|
|
|
1498
|
|
|
1499
|
|
|
1500
|
|
|
1501 )</dd>
|
|
|
1502 </dl>
|
|
|
1503 </div>
|
|
|
1504 <div class="method-description">
|
|
|
1505 <p>Enable the dialog.</p>
|
|
|
1506 </div>
|
|
|
1507 </li>
|
|
|
1508
|
|
|
1509
|
|
|
1510 <li class="method" id="method-option">
|
|
|
1511 <div class="method-header">
|
|
|
1512 <h3 class="method-name"><a href="#method-option">option</a></h3>
|
|
|
1513 <dl>
|
|
|
1514 <dt class="method-signature-label">Signature:</dt>
|
|
|
1515 <dd class="method-signature">.dialog( "option"
|
|
|
1516
|
|
|
1517 , optionName
|
|
|
1518
|
|
|
1519 , <span class="optional">[</span>value<span class="optional">] </span>
|
|
|
1520
|
|
|
1521
|
|
|
1522
|
|
|
1523 )</dd>
|
|
|
1524 </dl>
|
|
|
1525 </div>
|
|
|
1526 <div class="method-description">
|
|
|
1527 <p>Get or set any dialog option. If no value is specified, will act as a getter.</p>
|
|
|
1528 </div>
|
|
|
1529 </li>
|
|
|
1530
|
|
|
1531
|
|
|
1532 <li class="method" id="method-option">
|
|
|
1533 <div class="method-header">
|
|
|
1534 <h3 class="method-name"><a href="#method-option">option</a></h3>
|
|
|
1535 <dl>
|
|
|
1536 <dt class="method-signature-label">Signature:</dt>
|
|
|
1537 <dd class="method-signature">.dialog( "option"
|
|
|
1538
|
|
|
1539 , options
|
|
|
1540
|
|
|
1541
|
|
|
1542
|
|
|
1543
|
|
|
1544
|
|
|
1545 )</dd>
|
|
|
1546 </dl>
|
|
|
1547 </div>
|
|
|
1548 <div class="method-description">
|
|
|
1549 <p>Set multiple dialog options at once by providing an options object.</p>
|
|
|
1550 </div>
|
|
|
1551 </li>
|
|
|
1552
|
|
|
1553
|
|
|
1554 <li class="method" id="method-widget">
|
|
|
1555 <div class="method-header">
|
|
|
1556 <h3 class="method-name"><a href="#method-widget">widget</a></h3>
|
|
|
1557 <dl>
|
|
|
1558 <dt class="method-signature-label">Signature:</dt>
|
|
|
1559 <dd class="method-signature">.dialog( "widget"
|
|
|
1560
|
|
|
1561
|
|
|
1562
|
|
|
1563
|
|
|
1564
|
|
|
1565
|
|
|
1566
|
|
|
1567 )</dd>
|
|
|
1568 </dl>
|
|
|
1569 </div>
|
|
|
1570 <div class="method-description">
|
|
|
1571 <p>Returns the .ui-dialog element.</p>
|
|
|
1572 </div>
|
|
|
1573 </li>
|
|
|
1574
|
|
|
1575
|
|
|
1576 <li class="method" id="method-close">
|
|
|
1577 <div class="method-header">
|
|
|
1578 <h3 class="method-name"><a href="#method-close">close</a></h3>
|
|
|
1579 <dl>
|
|
|
1580 <dt class="method-signature-label">Signature:</dt>
|
|
|
1581 <dd class="method-signature">.dialog( "close"
|
|
|
1582
|
|
|
1583
|
|
|
1584
|
|
|
1585
|
|
|
1586
|
|
|
1587
|
|
|
1588
|
|
|
1589 )</dd>
|
|
|
1590 </dl>
|
|
|
1591 </div>
|
|
|
1592 <div class="method-description">
|
|
|
1593 <p>Close the dialog.</p>
|
|
|
1594 </div>
|
|
|
1595 </li>
|
|
|
1596
|
|
|
1597
|
|
|
1598 <li class="method" id="method-isOpen">
|
|
|
1599 <div class="method-header">
|
|
|
1600 <h3 class="method-name"><a href="#method-isOpen">isOpen</a></h3>
|
|
|
1601 <dl>
|
|
|
1602 <dt class="method-signature-label">Signature:</dt>
|
|
|
1603 <dd class="method-signature">.dialog( "isOpen"
|
|
|
1604
|
|
|
1605
|
|
|
1606
|
|
|
1607
|
|
|
1608
|
|
|
1609
|
|
|
1610
|
|
|
1611 )</dd>
|
|
|
1612 </dl>
|
|
|
1613 </div>
|
|
|
1614 <div class="method-description">
|
|
|
1615 <p>Returns true if the dialog is currently open.</p>
|
|
|
1616 </div>
|
|
|
1617 </li>
|
|
|
1618
|
|
|
1619
|
|
|
1620 <li class="method" id="method-moveToTop">
|
|
|
1621 <div class="method-header">
|
|
|
1622 <h3 class="method-name"><a href="#method-moveToTop">moveToTop</a></h3>
|
|
|
1623 <dl>
|
|
|
1624 <dt class="method-signature-label">Signature:</dt>
|
|
|
1625 <dd class="method-signature">.dialog( "moveToTop"
|
|
|
1626
|
|
|
1627
|
|
|
1628
|
|
|
1629
|
|
|
1630
|
|
|
1631
|
|
|
1632
|
|
|
1633 )</dd>
|
|
|
1634 </dl>
|
|
|
1635 </div>
|
|
|
1636 <div class="method-description">
|
|
|
1637 <p>Move the dialog to the top of the dialogs stack.</p>
|
|
|
1638 </div>
|
|
|
1639 </li>
|
|
|
1640
|
|
|
1641
|
|
|
1642 <li class="method" id="method-open">
|
|
|
1643 <div class="method-header">
|
|
|
1644 <h3 class="method-name"><a href="#method-open">open</a></h3>
|
|
|
1645 <dl>
|
|
|
1646 <dt class="method-signature-label">Signature:</dt>
|
|
|
1647 <dd class="method-signature">.dialog( "open"
|
|
|
1648
|
|
|
1649
|
|
|
1650
|
|
|
1651
|
|
|
1652
|
|
|
1653
|
|
|
1654
|
|
|
1655 )</dd>
|
|
|
1656 </dl>
|
|
|
1657 </div>
|
|
|
1658 <div class="method-description">
|
|
|
1659 <p>Open the dialog.</p>
|
|
|
1660 </div>
|
|
|
1661 </li>
|
|
|
1662
|
|
|
1663 </ul>
|
|
|
1664 </div>
|
|
|
1665 <div id="theming">
|
|
|
1666 <h2 class="top-header">Theming</h2>
|
|
|
1667 <p>The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
|
|
|
1668 </p>
|
|
|
1669 <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.dialog.css stylesheet that can be modified. These classes are highlighed in bold below.
|
|
|
1670 </p>
|
|
|
1671
|
|
|
1672 <h3>Sample markup with jQuery UI CSS Framework classes</h3>
|
|
|
1673 <div class="<strong>ui-dialog</strong> ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"><br />
|
|
|
1674 <div class="<strong>ui-dialog-titlebar</strong> ui-widget-header ui-corner-all ui-helper-clearfix"><br />
|
|
|
1675 <span id="<strong>ui-dialog-title-dialog</strong>" class="ui-dialog-title">Dialog title</span><br />
|
|
|
1676 <a class="<strong>ui-dialog-titlebar-close</strong> ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a><br />
|
|
|
1677 </div><br />
|
|
|
1678 <div style="height: 200px; min-height: 109px; width: auto;" class="<strong>ui-dialog-content</strong> ui-widget-content" id="dialog"><br />
|
|
|
1679 <p>Dialog content goes here.</p><br />
|
|
|
1680 </div><br />
|
|
|
1681 </div><br />
|
|
|
1682 <p class="theme-note">
|
|
|
1683 <strong>
|
|
|
1684 Note: This is a sample of markup generated by the dialog plugin, not markup you should use to create a dialog. The only markup needed for that is <div></div>.
|
|
|
1685 </strong>
|
|
|
1686 </p>
|
|
|
1687
|
|
|
1688 </div>
|
|
|
1689 </div>
|
|
|
1690
|
|
|
1691 </p><!--
|
|
|
1692 Pre-expand include size: 66595 bytes
|
|
|
1693 Post-expand include size: 113099 bytes
|
|
|
1694 Template argument size: 62032 bytes
|
|
|
1695 Maximum: 2097152 bytes
|
|
|
1696 -->
|
|
|
1697
|
|
|
1698 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3775-1!1!0!!en!2 and timestamp 20110315194523 -->
|
