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