source: main/trunk/greenstone3/web/interfaces/oran/js/jquery-ui-1.8rc1/docs/dialog.html@ 24245

Last change on this file since 24245 was 24245, checked in by sjb48, 13 years ago

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