Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

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