aboutsummaryrefslogtreecommitdiff
path: root/static/development-bundle/docs/dialog.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/development-bundle/docs/dialog.html')
-rw-r--r--static/development-bundle/docs/dialog.html1520
1 files changed, 0 insertions, 1520 deletions
diff --git a/static/development-bundle/docs/dialog.html b/static/development-bundle/docs/dialog.html
deleted file mode 100644
index b763298..0000000
--- a/static/development-bundle/docs/dialog.html
+++ /dev/null
@@ -1,1520 +0,0 @@
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> initializes a dialog. If you want a click to open a dialog, use <code>$(foo).dialog('open')</code>, but if the dialog hasn't been destroyed, the <code>$(foo).dialog()</code> init call is only required once, not on each click.
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-dialogClass">
239 <div class="option-header">
240 <h3 class="option-name"><a href="#option-dialogClass">dialogClass</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">''</dd>
247
248 </dl>
249 </div>
250 <div class="option-description">
251 <p>The specified class name(s) will be added to the dialog, for additional theming.</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>dialogClass</code> option specified.
259</dt>
260<dd>
261<pre><code>$('.selector').dialog({ dialogClass: 'alert' });</code></pre>
262</dd>
263
264
265<dt>
266 Get or set the <code>dialogClass</code> option, after init.
267</dt>
268<dd>
269<pre><code>//getter
270var dialogClass = $('.selector').dialog('option', 'dialogClass');
271//setter
272$('.selector').dialog('option', 'dialogClass', 'alert');</code></pre>
273</dd>
274
275 </dl>
276 </div>
277</li>
278
279
280<li class="option" id="option-draggable">
281 <div class="option-header">
282 <h3 class="option-name"><a href="#option-draggable">draggable</a></h3>
283 <dl>
284 <dt class="option-type-label">Type:</dt>
285 <dd class="option-type">Boolean</dd>
286
287 <dt class="option-default-label">Default:</dt>
288 <dd class="option-default">true</dd>
289
290 </dl>
291 </div>
292 <div class="option-description">
293 <p>If set to true, the dialog will be draggable will be draggable by the titlebar.</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>draggable</code> option specified.
301</dt>
302<dd>
303<pre><code>$('.selector').dialog({ draggable: false });</code></pre>
304</dd>
305
306
307<dt>
308 Get or set the <code>draggable</code> option, after init.
309</dt>
310<dd>
311<pre><code>//getter
312var draggable = $('.selector').dialog('option', 'draggable');
313//setter
314$('.selector').dialog('option', 'draggable', false);</code></pre>
315</dd>
316
317 </dl>
318 </div>
319</li>
320
321
322<li class="option" id="option-height">
323 <div class="option-header">
324 <h3 class="option-name"><a href="#option-height">height</a></h3>
325 <dl>
326 <dt class="option-type-label">Type:</dt>
327 <dd class="option-type">Number</dd>
328
329 <dt class="option-default-label">Default:</dt>
330 <dd class="option-default">'auto'</dd>
331
332 </dl>
333 </div>
334 <div class="option-description">
335 <p>The height of the dialog, in pixels.</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>height</code> option specified.
343</dt>
344<dd>
345<pre><code>$('.selector').dialog({ height: 530 });</code></pre>
346</dd>
347
348
349<dt>
350 Get or set the <code>height</code> option, after init.
351</dt>
352<dd>
353<pre><code>//getter
354var height = $('.selector').dialog('option', 'height');
355//setter
356$('.selector').dialog('option', 'height', 530);</code></pre>
357</dd>
358
359 </dl>
360 </div>
361</li>
362
363
364<li class="option" id="option-hide">
365 <div class="option-header">
366 <h3 class="option-name"><a href="#option-hide">hide</a></h3>
367 <dl>
368 <dt class="option-type-label">Type:</dt>
369 <dd class="option-type">String</dd>
370
371 <dt class="option-default-label">Default:</dt>
372 <dd class="option-default">null</dd>
373
374 </dl>
375 </div>
376 <div class="option-description">
377 <p>The effect to be used when the dialog is closed.</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>hide</code> option specified.
385</dt>
386<dd>
387<pre><code>$('.selector').dialog({ hide: 'slide' });</code></pre>
388</dd>
389
390
391<dt>
392 Get or set the <code>hide</code> option, after init.
393</dt>
394<dd>
395<pre><code>//getter
396var hide = $('.selector').dialog('option', 'hide');
397//setter
398$('.selector').dialog('option', 'hide', 'slide');</code></pre>
399</dd>
400
401 </dl>
402 </div>
403</li>
404
405
406<li class="option" id="option-maxHeight">
407 <div class="option-header">
408 <h3 class="option-name"><a href="#option-maxHeight">maxHeight</a></h3>
409 <dl>
410 <dt class="option-type-label">Type:</dt>
411 <dd class="option-type">Number</dd>
412
413 <dt class="option-default-label">Default:</dt>
414 <dd class="option-default">false</dd>
415
416 </dl>
417 </div>
418 <div class="option-description">
419 <p>The maximum height to which the dialog can be resized, in pixels.</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>maxHeight</code> option specified.
427</dt>
428<dd>
429<pre><code>$('.selector').dialog({ maxHeight: 400 });</code></pre>
430</dd>
431
432
433<dt>
434 Get or set the <code>maxHeight</code> option, after init.
435</dt>
436<dd>
437<pre><code>//getter
438var maxHeight = $('.selector').dialog('option', 'maxHeight');
439//setter
440$('.selector').dialog('option', 'maxHeight', 400);</code></pre>
441</dd>
442
443 </dl>
444 </div>
445</li>
446
447
448<li class="option" id="option-maxWidth">
449 <div class="option-header">
450 <h3 class="option-name"><a href="#option-maxWidth">maxWidth</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 width 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>maxWidth</code> option specified.
469</dt>
470<dd>
471<pre><code>$('.selector').dialog({ maxWidth: 600 });</code></pre>
472</dd>
473
474
475<dt>
476 Get or set the <code>maxWidth</code> option, after init.
477</dt>
478<dd>
479<pre><code>//getter
480var maxWidth = $('.selector').dialog('option', 'maxWidth');
481//setter
482$('.selector').dialog('option', 'maxWidth', 600);</code></pre>
483</dd>
484
485 </dl>
486 </div>
487</li>
488
489
490<li class="option" id="option-minHeight">
491 <div class="option-header">
492 <h3 class="option-name"><a href="#option-minHeight">minHeight</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">150</dd>
499
500 </dl>
501 </div>
502 <div class="option-description">
503 <p>The minimum height 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>minHeight</code> option specified.
511</dt>
512<dd>
513<pre><code>$('.selector').dialog({ minHeight: 300 });</code></pre>
514</dd>
515
516
517<dt>
518 Get or set the <code>minHeight</code> option, after init.
519</dt>
520<dd>
521<pre><code>//getter
522var minHeight = $('.selector').dialog('option', 'minHeight');
523//setter
524$('.selector').dialog('option', 'minHeight', 300);</code></pre>
525</dd>
526
527 </dl>
528 </div>
529</li>
530
531
532<li class="option" id="option-minWidth">
533 <div class="option-header">
534 <h3 class="option-name"><a href="#option-minWidth">minWidth</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 width 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>minWidth</code> option specified.
553</dt>
554<dd>
555<pre><code>$('.selector').dialog({ minWidth: 400 });</code></pre>
556</dd>
557
558
559<dt>
560 Get or set the <code>minWidth</code> option, after init.
561</dt>
562<dd>
563<pre><code>//getter
564var minWidth = $('.selector').dialog('option', 'minWidth');
565//setter
566$('.selector').dialog('option', 'minWidth', 400);</code></pre>
567</dd>
568
569 </dl>
570 </div>
571</li>
572
573
574<li class="option" id="option-modal">
575 <div class="option-header">
576 <h3 class="option-name"><a href="#option-modal">modal</a></h3>
577 <dl>
578 <dt class="option-type-label">Type:</dt>
579 <dd class="option-type">Boolean</dd>
580
581 <dt class="option-default-label">Default:</dt>
582 <dd class="option-default">false</dd>
583
584 </dl>
585 </div>
586 <div class="option-description">
587 <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>
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>modal</code> option specified.
595</dt>
596<dd>
597<pre><code>$('.selector').dialog({ modal: true });</code></pre>
598</dd>
599
600
601<dt>
602 Get or set the <code>modal</code> option, after init.
603</dt>
604<dd>
605<pre><code>//getter
606var modal = $('.selector').dialog('option', 'modal');
607//setter
608$('.selector').dialog('option', 'modal', true);</code></pre>
609</dd>
610
611 </dl>
612 </div>
613</li>
614
615
616<li class="option" id="option-position">
617 <div class="option-header">
618 <h3 class="option-name"><a href="#option-position">position</a></h3>
619 <dl>
620 <dt class="option-type-label">Type:</dt>
621 <dd class="option-type">String, Array</dd>
622
623 <dt class="option-default-label">Default:</dt>
624 <dd class="option-default">'center'</dd>
625
626 </dl>
627 </div>
628 <div class="option-description">
629 <p>Specifies where the dialog should be displayed. Possible values: 'center', 'left', 'right', 'top', 'bottom', or an array containing a coordinate pair (in pixel offset from top left of viewport) or the possible string values (e.g. ['right','top'] for top right corner).</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>position</code> option specified.
637</dt>
638<dd>
639<pre><code>$('.selector').dialog({ position: 'top' });</code></pre>
640</dd>
641
642
643<dt>
644 Get or set the <code>position</code> option, after init.
645</dt>
646<dd>
647<pre><code>//getter
648var position = $('.selector').dialog('option', 'position');
649//setter
650$('.selector').dialog('option', 'position', 'top');</code></pre>
651</dd>
652
653 </dl>
654 </div>
655</li>
656
657
658<li class="option" id="option-resizable">
659 <div class="option-header">
660 <h3 class="option-name"><a href="#option-resizable">resizable</a></h3>
661 <dl>
662 <dt class="option-type-label">Type:</dt>
663 <dd class="option-type">Boolean</dd>
664
665 <dt class="option-default-label">Default:</dt>
666 <dd class="option-default">true</dd>
667
668 </dl>
669 </div>
670 <div class="option-description">
671 <p>If set to true, the dialog will be resizeable.</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>resizable</code> option specified.
679</dt>
680<dd>
681<pre><code>$('.selector').dialog({ resizable: false });</code></pre>
682</dd>
683
684
685<dt>
686 Get or set the <code>resizable</code> option, after init.
687</dt>
688<dd>
689<pre><code>//getter
690var resizable = $('.selector').dialog('option', 'resizable');
691//setter
692$('.selector').dialog('option', 'resizable', false);</code></pre>
693</dd>
694
695 </dl>
696 </div>
697</li>
698
699
700<li class="option" id="option-show">
701 <div class="option-header">
702 <h3 class="option-name"><a href="#option-show">show</a></h3>
703 <dl>
704 <dt class="option-type-label">Type:</dt>
705 <dd class="option-type">String</dd>
706
707 <dt class="option-default-label">Default:</dt>
708 <dd class="option-default">null</dd>
709
710 </dl>
711 </div>
712 <div class="option-description">
713 <p>The effect to be used when the dialog is opened.</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>show</code> option specified.
721</dt>
722<dd>
723<pre><code>$('.selector').dialog({ show: 'slide' });</code></pre>
724</dd>
725
726
727<dt>
728 Get or set the <code>show</code> option, after init.
729</dt>
730<dd>
731<pre><code>//getter
732var show = $('.selector').dialog('option', 'show');
733//setter
734$('.selector').dialog('option', 'show', 'slide');</code></pre>
735</dd>
736
737 </dl>
738 </div>
739</li>
740
741
742<li class="option" id="option-stack">
743 <div class="option-header">
744 <h3 class="option-name"><a href="#option-stack">stack</a></h3>
745 <dl>
746 <dt class="option-type-label">Type:</dt>
747 <dd class="option-type">Boolean</dd>
748
749 <dt class="option-default-label">Default:</dt>
750 <dd class="option-default">true</dd>
751
752 </dl>
753 </div>
754 <div class="option-description">
755 <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>
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>stack</code> option specified.
763</dt>
764<dd>
765<pre><code>$('.selector').dialog({ stack: false });</code></pre>
766</dd>
767
768
769<dt>
770 Get or set the <code>stack</code> option, after init.
771</dt>
772<dd>
773<pre><code>//getter
774var stack = $('.selector').dialog('option', 'stack');
775//setter
776$('.selector').dialog('option', 'stack', false);</code></pre>
777</dd>
778
779 </dl>
780 </div>
781</li>
782
783
784<li class="option" id="option-title">
785 <div class="option-header">
786 <h3 class="option-name"><a href="#option-title">title</a></h3>
787 <dl>
788 <dt class="option-type-label">Type:</dt>
789 <dd class="option-type">String</dd>
790
791 <dt class="option-default-label">Default:</dt>
792 <dd class="option-default">''</dd>
793
794 </dl>
795 </div>
796 <div class="option-description">
797 <p>Specifies the title of the dialog. The title can also be specified by the title attribute on the dialog source element.</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>title</code> option specified.
805</dt>
806<dd>
807<pre><code>$('.selector').dialog({ title: 'Dialog Title' });</code></pre>
808</dd>
809
810
811<dt>
812 Get or set the <code>title</code> option, after init.
813</dt>
814<dd>
815<pre><code>//getter
816var title = $('.selector').dialog('option', 'title');
817//setter
818$('.selector').dialog('option', 'title', 'Dialog Title');</code></pre>
819</dd>
820
821 </dl>
822 </div>
823</li>
824
825
826<li class="option" id="option-width">
827 <div class="option-header">
828 <h3 class="option-name"><a href="#option-width">width</a></h3>
829 <dl>
830 <dt class="option-type-label">Type:</dt>
831 <dd class="option-type">Number</dd>
832
833 <dt class="option-default-label">Default:</dt>
834 <dd class="option-default">300</dd>
835
836 </dl>
837 </div>
838 <div class="option-description">
839 <p>The width of the dialog, in pixels.</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>width</code> option specified.
847</dt>
848<dd>
849<pre><code>$('.selector').dialog({ width: 460 });</code></pre>
850</dd>
851
852
853<dt>
854 Get or set the <code>width</code> option, after init.
855</dt>
856<dd>
857<pre><code>//getter
858var width = $('.selector').dialog('option', 'width');
859//setter
860$('.selector').dialog('option', 'width', 460);</code></pre>
861</dd>
862
863 </dl>
864 </div>
865</li>
866
867
868<li class="option" id="option-zIndex">
869 <div class="option-header">
870 <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
871 <dl>
872 <dt class="option-type-label">Type:</dt>
873 <dd class="option-type">Integer</dd>
874
875 <dt class="option-default-label">Default:</dt>
876 <dd class="option-default">1000</dd>
877
878 </dl>
879 </div>
880 <div class="option-description">
881 <p>The starting z-index for the dialog.</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>zIndex</code> option specified.
889</dt>
890<dd>
891<pre><code>$('.selector').dialog({ zIndex: 3999 });</code></pre>
892</dd>
893
894
895<dt>
896 Get or set the <code>zIndex</code> option, after init.
897</dt>
898<dd>
899<pre><code>//getter
900var zIndex = $('.selector').dialog('option', 'zIndex');
901//setter
902$('.selector').dialog('option', 'zIndex', 3999);</code></pre>
903</dd>
904
905 </dl>
906 </div>
907</li>
908
909 </ul>
910 </div>
911 <div id="events">
912 <h2 class="top-header">Events</h2>
913 <ul class="events-list">
914
915<li class="event" id="event-beforeclose">
916 <div class="event-header">
917 <h3 class="event-name"><a href="#event-beforeclose">beforeclose</a></h3>
918 <dl>
919 <dt class="event-type-label">Type:</dt>
920 <dd class="event-type">dialogbeforeclose</dd>
921 </dl>
922 </div>
923 <div class="event-description">
924 <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>
925 </div>
926 <div class="event-examples">
927 <h4>Code examples</h4>
928 <dl class="event-examples-list">
929
930<dt>
931 Supply a callback function to handle the <code>beforeclose</code> event as an init option.
932</dt>
933<dd>
934<pre><code>$('.selector').dialog({
935 beforeclose: function(event, ui) { ... }
936});</code></pre>
937</dd>
938
939
940<dt>
941 Bind to the <code>beforeclose</code> event by type: <code>dialogbeforeclose</code>.
942</dt>
943<dd>
944<pre><code>$('.selector').bind('dialogbeforeclose', function(event, ui) {
945 ...
946});</code></pre>
947</dd>
948
949 </dl>
950 </div>
951</li>
952
953
954<li class="event" id="event-open">
955 <div class="event-header">
956 <h3 class="event-name"><a href="#event-open">open</a></h3>
957 <dl>
958 <dt class="event-type-label">Type:</dt>
959 <dd class="event-type">dialogopen</dd>
960 </dl>
961 </div>
962 <div class="event-description">
963 <p>This event is triggered when dialog is opened.</p>
964 </div>
965 <div class="event-examples">
966 <h4>Code examples</h4>
967 <dl class="event-examples-list">
968
969<dt>
970 Supply a callback function to handle the <code>open</code> event as an init option.
971</dt>
972<dd>
973<pre><code>$('.selector').dialog({
974 open: function(event, ui) { ... }
975});</code></pre>
976</dd>
977
978
979<dt>
980 Bind to the <code>open</code> event by type: <code>dialogopen</code>.
981</dt>
982<dd>
983<pre><code>$('.selector').bind('dialogopen', function(event, ui) {
984 ...
985});</code></pre>
986</dd>
987
988 </dl>
989 </div>
990</li>
991
992
993<li class="event" id="event-focus">
994 <div class="event-header">
995 <h3 class="event-name"><a href="#event-focus">focus</a></h3>
996 <dl>
997 <dt class="event-type-label">Type:</dt>
998 <dd class="event-type">dialogfocus</dd>
999 </dl>
1000 </div>
1001 <div class="event-description">
1002 <p>This event is triggered when the dialog gains focus.</p>
1003 </div>
1004 <div class="event-examples">
1005 <h4>Code examples</h4>
1006 <dl class="event-examples-list">
1007
1008<dt>
1009 Supply a callback function to handle the <code>focus</code> event as an init option.
1010</dt>
1011<dd>
1012<pre><code>$('.selector').dialog({
1013 focus: function(event, ui) { ... }
1014});</code></pre>
1015</dd>
1016
1017
1018<dt>
1019 Bind to the <code>focus</code> event by type: <code>dialogfocus</code>.
1020</dt>
1021<dd>
1022<pre><code>$('.selector').bind('dialogfocus', function(event, ui) {
1023 ...
1024});</code></pre>
1025</dd>
1026
1027 </dl>
1028 </div>
1029</li>
1030
1031
1032<li class="event" id="event-dragStart">
1033 <div class="event-header">
1034 <h3 class="event-name"><a href="#event-dragStart">dragStart</a></h3>
1035 <dl>
1036 <dt class="event-type-label">Type:</dt>
1037 <dd class="event-type">dragStart</dd>
1038 </dl>
1039 </div>
1040 <div class="event-description">
1041 <p>This event is triggered at the beginning of the dialog being dragged.</p>
1042 </div>
1043 <div class="event-examples">
1044 <h4>Code examples</h4>
1045 <dl class="event-examples-list">
1046
1047<dt>
1048 Supply a callback function to handle the <code>dragStart</code> event as an init option.
1049</dt>
1050<dd>
1051<pre><code>$('.selector').dialog({
1052 dragStart: function(event, ui) { ... }
1053});</code></pre>
1054</dd>
1055
1056
1057<dt>
1058 Bind to the <code>dragStart</code> event by type: <code>dragStart</code>.
1059</dt>
1060<dd>
1061<pre><code>$('.selector').bind('dragStart', function(event, ui) {
1062 ...
1063});</code></pre>
1064</dd>
1065
1066 </dl>
1067 </div>
1068</li>
1069
1070
1071<li class="event" id="event-drag">
1072 <div class="event-header">
1073 <h3 class="event-name"><a href="#event-drag">drag</a></h3>
1074 <dl>
1075 <dt class="event-type-label">Type:</dt>
1076 <dd class="event-type">drag</dd>
1077 </dl>
1078 </div>
1079 <div class="event-description">
1080 <p>This event is triggered when the dialog is dragged.</p>
1081 </div>
1082 <div class="event-examples">
1083 <h4>Code examples</h4>
1084 <dl class="event-examples-list">
1085
1086<dt>
1087 Supply a callback function to handle the <code>drag</code> event as an init option.
1088</dt>
1089<dd>
1090<pre><code>$('.selector').dialog({
1091 drag: function(event, ui) { ... }
1092});</code></pre>
1093</dd>
1094
1095
1096<dt>
1097 Bind to the <code>drag</code> event by type: <code>drag</code>.
1098</dt>
1099<dd>
1100<pre><code>$('.selector').bind('drag', function(event, ui) {
1101 ...
1102});</code></pre>
1103</dd>
1104
1105 </dl>
1106 </div>
1107</li>
1108
1109
1110<li class="event" id="event-dragStop">
1111 <div class="event-header">
1112 <h3 class="event-name"><a href="#event-dragStop">dragStop</a></h3>
1113 <dl>
1114 <dt class="event-type-label">Type:</dt>
1115 <dd class="event-type">dragStop</dd>
1116 </dl>
1117 </div>
1118 <div class="event-description">
1119 <p>This event is triggered after the dialog has been dragged.</p>
1120 </div>
1121 <div class="event-examples">
1122 <h4>Code examples</h4>
1123 <dl class="event-examples-list">
1124
1125<dt>
1126 Supply a callback function to handle the <code>dragStop</code> event as an init option.
1127</dt>
1128<dd>
1129<pre><code>$('.selector').dialog({
1130 dragStop: function(event, ui) { ... }
1131});</code></pre>
1132</dd>
1133
1134
1135<dt>
1136 Bind to the <code>dragStop</code> event by type: <code>dragStop</code>.
1137</dt>
1138<dd>
1139<pre><code>$('.selector').bind('dragStop', function(event, ui) {
1140 ...
1141});</code></pre>
1142</dd>
1143
1144 </dl>
1145 </div>
1146</li>
1147
1148
1149<li class="event" id="event-resizeStart">
1150 <div class="event-header">
1151 <h3 class="event-name"><a href="#event-resizeStart">resizeStart</a></h3>
1152 <dl>
1153 <dt class="event-type-label">Type:</dt>
1154 <dd class="event-type">resizeStart</dd>
1155 </dl>
1156 </div>
1157 <div class="event-description">
1158 <p>This event is triggered at the beginning of the dialog being resized.</p>
1159 </div>
1160 <div class="event-examples">
1161 <h4>Code examples</h4>
1162 <dl class="event-examples-list">
1163
1164<dt>
1165 Supply a callback function to handle the <code>resizeStart</code> event as an init option.
1166</dt>
1167<dd>
1168<pre><code>$('.selector').dialog({
1169 resizeStart: function(event, ui) { ... }
1170});</code></pre>
1171</dd>
1172
1173
1174<dt>
1175 Bind to the <code>resizeStart</code> event by type: <code>resizeStart</code>.
1176</dt>
1177<dd>
1178<pre><code>$('.selector').bind('resizeStart', function(event, ui) {
1179 ...
1180});</code></pre>
1181</dd>
1182
1183 </dl>
1184 </div>
1185</li>
1186
1187
1188<li class="event" id="event-resize">
1189 <div class="event-header">
1190 <h3 class="event-name"><a href="#event-resize">resize</a></h3>
1191 <dl>
1192 <dt class="event-type-label">Type:</dt>
1193 <dd class="event-type">resize</dd>
1194 </dl>
1195 </div>
1196 <div class="event-description">
1197 <p>This event is triggered when the dialog is resized.</p>
1198 </div>
1199 <div class="event-examples">
1200 <h4>Code examples</h4>
1201 <dl class="event-examples-list">
1202
1203<dt>
1204 Supply a callback function to handle the <code>resize</code> event as an init option.
1205</dt>
1206<dd>
1207<pre><code>$('.selector').dialog({
1208 resize: function(event, ui) { ... }
1209});</code></pre>
1210</dd>
1211
1212
1213<dt>
1214 Bind to the <code>resize</code> event by type: <code>resize</code>.
1215</dt>
1216<dd>
1217<pre><code>$('.selector').bind('resize', function(event, ui) {
1218 ...
1219});</code></pre>
1220</dd>
1221
1222 </dl>
1223 </div>
1224</li>
1225
1226
1227<li class="event" id="event-resizeStop">
1228 <div class="event-header">
1229 <h3 class="event-name"><a href="#event-resizeStop">resizeStop</a></h3>
1230 <dl>
1231 <dt class="event-type-label">Type:</dt>
1232 <dd class="event-type">resizeStop</dd>
1233 </dl>
1234 </div>
1235 <div class="event-description">
1236 <p>This event is triggered after the dialog has been resized.</p>
1237 </div>
1238 <div class="event-examples">
1239 <h4>Code examples</h4>
1240 <dl class="event-examples-list">
1241
1242<dt>
1243 Supply a callback function to handle the <code>resizeStop</code> event as an init option.
1244</dt>
1245<dd>
1246<pre><code>$('.selector').dialog({
1247 resizeStop: function(event, ui) { ... }
1248});</code></pre>
1249</dd>
1250
1251
1252<dt>
1253 Bind to the <code>resizeStop</code> event by type: <code>resizeStop</code>.
1254</dt>
1255<dd>
1256<pre><code>$('.selector').bind('resizeStop', function(event, ui) {
1257 ...
1258});</code></pre>
1259</dd>
1260
1261 </dl>
1262 </div>
1263</li>
1264
1265
1266<li class="event" id="event-close">
1267 <div class="event-header">
1268 <h3 class="event-name"><a href="#event-close">close</a></h3>
1269 <dl>
1270 <dt class="event-type-label">Type:</dt>
1271 <dd class="event-type">dialogclose</dd>
1272 </dl>
1273 </div>
1274 <div class="event-description">
1275 <p>This event is triggered when the dialog is closed.</p>
1276 </div>
1277 <div class="event-examples">
1278 <h4>Code examples</h4>
1279 <dl class="event-examples-list">
1280
1281<dt>
1282 Supply a callback function to handle the <code>close</code> event as an init option.
1283</dt>
1284<dd>
1285<pre><code>$('.selector').dialog({
1286 close: function(event, ui) { ... }
1287});</code></pre>
1288</dd>
1289
1290
1291<dt>
1292 Bind to the <code>close</code> event by type: <code>dialogclose</code>.
1293</dt>
1294<dd>
1295<pre><code>$('.selector').bind('dialogclose', function(event, ui) {
1296 ...
1297});</code></pre>
1298</dd>
1299
1300 </dl>
1301 </div>
1302</li>
1303
1304 </ul>
1305 </div>
1306 <div id="methods">
1307 <h2 class="top-header">Methods</h2>
1308 <ul class="methods-list">
1309
1310<li class="method" id="method-destroy">
1311 <div class="method-header">
1312 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
1313 <dl>
1314 <dt class="method-signature-label">Signature:</dt>
1315 <dd class="method-signature">.dialog( 'destroy'
1316
1317
1318
1319
1320
1321
1322
1323)</dd>
1324 </dl>
1325 </div>
1326 <div class="method-description">
1327 <p>Remove the dialog functionality completely. This will return the element back to its pre-init state.</p>
1328 </div>
1329</li>
1330
1331
1332<li class="method" id="method-disable">
1333 <div class="method-header">
1334 <h3 class="method-name"><a href="#method-disable">disable</a></h3>
1335 <dl>
1336 <dt class="method-signature-label">Signature:</dt>
1337 <dd class="method-signature">.dialog( 'disable'
1338
1339
1340
1341
1342
1343
1344
1345)</dd>
1346 </dl>
1347 </div>
1348 <div class="method-description">
1349 <p>Disable the dialog.</p>
1350 </div>
1351</li>
1352
1353
1354<li class="method" id="method-enable">
1355 <div class="method-header">
1356 <h3 class="method-name"><a href="#method-enable">enable</a></h3>
1357 <dl>
1358 <dt class="method-signature-label">Signature:</dt>
1359 <dd class="method-signature">.dialog( 'enable'
1360
1361
1362
1363
1364
1365
1366
1367)</dd>
1368 </dl>
1369 </div>
1370 <div class="method-description">
1371 <p>Enable the dialog.</p>
1372 </div>
1373</li>
1374
1375
1376<li class="method" id="method-option">
1377 <div class="method-header">
1378 <h3 class="method-name"><a href="#method-option">option</a></h3>
1379 <dl>
1380 <dt class="method-signature-label">Signature:</dt>
1381 <dd class="method-signature">.dialog( 'option'
1382
1383, optionName
1384
1385, <span class="optional">[</span>value<span class="optional">] </span>
1386
1387
1388
1389)</dd>
1390 </dl>
1391 </div>
1392 <div class="method-description">
1393 <p>Get or set any dialog option. If no value is specified, will act as a getter.</p>
1394 </div>
1395</li>
1396
1397
1398<li class="method" id="method-close">
1399 <div class="method-header">
1400 <h3 class="method-name"><a href="#method-close">close</a></h3>
1401 <dl>
1402 <dt class="method-signature-label">Signature:</dt>
1403 <dd class="method-signature">.dialog( 'close'
1404
1405
1406
1407
1408
1409
1410
1411)</dd>
1412 </dl>
1413 </div>
1414 <div class="method-description">
1415 <p>Close the dialog.</p>
1416 </div>
1417</li>
1418
1419
1420<li class="method" id="method-isOpen">
1421 <div class="method-header">
1422 <h3 class="method-name"><a href="#method-isOpen">isOpen</a></h3>
1423 <dl>
1424 <dt class="method-signature-label">Signature:</dt>
1425 <dd class="method-signature">.dialog( 'isOpen'
1426
1427
1428
1429
1430
1431
1432
1433)</dd>
1434 </dl>
1435 </div>
1436 <div class="method-description">
1437 <p>Returns true if the dialog is currently open.</p>
1438 </div>
1439</li>
1440
1441
1442<li class="method" id="method-moveToTop">
1443 <div class="method-header">
1444 <h3 class="method-name"><a href="#method-moveToTop">moveToTop</a></h3>
1445 <dl>
1446 <dt class="method-signature-label">Signature:</dt>
1447 <dd class="method-signature">.dialog( 'moveToTop'
1448
1449
1450
1451
1452
1453
1454
1455)</dd>
1456 </dl>
1457 </div>
1458 <div class="method-description">
1459 <p>Move the dialog to the top of the dialogs stack.</p>
1460 </div>
1461</li>
1462
1463
1464<li class="method" id="method-open">
1465 <div class="method-header">
1466 <h3 class="method-name"><a href="#method-open">open</a></h3>
1467 <dl>
1468 <dt class="method-signature-label">Signature:</dt>
1469 <dd class="method-signature">.dialog( 'open'
1470
1471
1472
1473
1474
1475
1476
1477)</dd>
1478 </dl>
1479 </div>
1480 <div class="method-description">
1481 <p>Open the dialog.</p>
1482 </div>
1483</li>
1484
1485 </ul>
1486 </div>
1487 <div id="theming">
1488 <h2 class="top-header">Theming</h2>
1489 <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.
1490</p>
1491 <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.
1492</p>
1493
1494 <h3>Sample markup with jQuery UI CSS Framework classes</h3>
1495 &lt;div class=&quot;<strong>ui-dialog</strong> ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable&quot;&gt;<br />
1496&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-dialog-titlebar</strong> ui-widget-header ui-corner-all ui-helper-clearfix&quot;&gt;<br />
1497&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 />
1498&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 />
1499&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
1500&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 />
1501&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Dialog content goes here.&lt;/p&gt;<br />
1502&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
1503&lt;/div&gt;<br />
1504 <p class="theme-note">
1505 <strong>
1506 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;.
1507 </strong>
1508 </p>
1509
1510 </div>
1511</div>
1512
1513</p><!--
1514Pre-expand include size: 58797 bytes
1515Post-expand include size: 100188 bytes
1516Template argument size: 56839 bytes
1517Maximum: 2097152 bytes
1518-->
1519
1520<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3347-1!1!0!!en!2 and timestamp 20090604112219 -->
© 2015 Mike Crute