From af15f2c4a192dea02aab9e519defc68c71763ec4 Mon Sep 17 00:00:00 2001 From: yvesf Date: Mon, 22 Nov 2010 14:34:55 +0100 Subject: jquery ui --- static/development-bundle/docs/dialog.html | 1656 ++++++++++++++++++++++++++++ 1 file changed, 1656 insertions(+) create mode 100644 static/development-bundle/docs/dialog.html (limited to 'static/development-bundle/docs/dialog.html') diff --git a/static/development-bundle/docs/dialog.html b/static/development-bundle/docs/dialog.html new file mode 100644 index 0000000..9d490b1 --- /dev/null +++ b/static/development-bundle/docs/dialog.html @@ -0,0 +1,1656 @@ + + +
+

jQuery UI Dialog

+
+

Overview

+
+

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.

+

If the content length exceeds the maximum height, a scrollbar will automatically appear.

+

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

+

A call to $(foo).dialog() 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: $(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open'). To close it, use $(foo).dialog('close'). A more in-depth explanation with a full demo is available on the Nemikor blog.

+
+
+

Dependencies

+
    +
  • UI Core
    • +
  • UI Draggable (Optional)
    • +
  • UI Resizable (Optional)
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Dialog.
+

+
$("#dialog").dialog();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#dialog").dialog();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="dialog" title="Dialog Title">I'm in a dialog</div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the dialog. Can be set when initialising (first creating) the dialog.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the disabled option specified. +
    +
    +
    $( ".selector" ).dialog({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).dialog( "option", "disabled" );
+//setter
+$( ".selector" ).dialog( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    autoOpen

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    When autoOpen is true the dialog will open automatically when dialog is called. If false it will stay hidden until .dialog("open") is called on it.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the autoOpen option specified. +
    +
    +
    $( ".selector" ).dialog({ autoOpen: false });
    +
    + + +
    + Get or set the autoOpen option, after init. +
    +
    +
    //getter
+var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
+//setter
+$( ".selector" ).dialog( "option", "autoOpen", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    buttons

    +
    +
    Type:
    +
    Object
    + +
    Default:
    +
    { }
    + +
    +
    +
    +

    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. +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the buttons option specified. +
    +
    +
    $( ".selector" ).dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
    +
    + + +
    + Get or set the buttons option, after init. +
    +
    +
    //getter
+var buttons = $( ".selector" ).dialog( "option", "buttons" );
+//setter
+$( ".selector" ).dialog( "option", "buttons", { "Ok": function() { $(this).dialog("close"); } } );
    +
    + +
    +
    +
    • + + +
  • +
    +

    buttons

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    [ ]
    + +
    +
    +
    +

    Specifies which buttons should be displayed on the dialog. Each element of the array must be an Object defining the properties to set on the button. +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the buttons option specified. +
    +
    +
    $( ".selector" ).dialog({ buttons: [
+    {
+        text: "Ok",
+        click: function() { $(this).dialog("close"); }
+    }
+] });
    +
    + + +
    + Get or set the buttons option, after init. +
    +
    +
    //getter
+var buttons = $( ".selector" ).dialog( "option", "buttons" );
+//setter
+$( ".selector" ).dialog( "option", "buttons", [
+    {
+        text: "Ok",
+        click: function() { $(this).dialog("close"); }
+    }
+] );
    +
    + +
    +
    +
    • + + +
  • +
    +

    closeOnEscape

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the closeOnEscape option specified. +
    +
    +
    $( ".selector" ).dialog({ closeOnEscape: false });
    +
    + + +
    + Get or set the closeOnEscape option, after init. +
    +
    +
    //getter
+var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
+//setter
+$( ".selector" ).dialog( "option", "closeOnEscape", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    closeText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'close'
    + +
    +
    +
    +

    Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the closeText option specified. +
    +
    +
    $( ".selector" ).dialog({ closeText: 'hide' });
    +
    + + +
    + Get or set the closeText option, after init. +
    +
    +
    //getter
+var closeText = $( ".selector" ).dialog( "option", "closeText" );
+//setter
+$( ".selector" ).dialog( "option", "closeText", 'hide' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    dialogClass

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    The specified class name(s) will be added to the dialog, for additional theming.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the dialogClass option specified. +
    +
    +
    $( ".selector" ).dialog({ dialogClass: 'alert' });
    +
    + + +
    + Get or set the dialogClass option, after init. +
    +
    +
    //getter
+var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
+//setter
+$( ".selector" ).dialog( "option", "dialogClass", 'alert' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    draggable

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to true, the dialog will be draggable will be draggable by the titlebar.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the draggable option specified. +
    +
    +
    $( ".selector" ).dialog({ draggable: false });
    +
    + + +
    + Get or set the draggable option, after init. +
    +
    +
    //getter
+var draggable = $( ".selector" ).dialog( "option", "draggable" );
+//setter
+$( ".selector" ).dialog( "option", "draggable", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    height

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    'auto'
    + +
    +
    +
    +

    The height of the dialog, in pixels. Specifying 'auto' is also supported to make the dialog adjust based on its content.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the height option specified. +
    +
    +
    $( ".selector" ).dialog({ height: 530 });
    +
    + + +
    + Get or set the height option, after init. +
    +
    +
    //getter
+var height = $( ".selector" ).dialog( "option", "height" );
+//setter
+$( ".selector" ).dialog( "option", "height", 530 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    hide

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    The effect to be used when the dialog is closed.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the hide option specified. +
    +
    +
    $( ".selector" ).dialog({ hide: 'slide' });
    +
    + + +
    + Get or set the hide option, after init. +
    +
    +
    //getter
+var hide = $( ".selector" ).dialog( "option", "hide" );
+//setter
+$( ".selector" ).dialog( "option", "hide", 'slide' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    maxHeight

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    The maximum height to which the dialog can be resized, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the maxHeight option specified. +
    +
    +
    $( ".selector" ).dialog({ maxHeight: 400 });
    +
    + + +
    + Get or set the maxHeight option, after init. +
    +
    +
    //getter
+var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );
+//setter
+$( ".selector" ).dialog( "option", "maxHeight", 400 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    maxWidth

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    The maximum width to which the dialog can be resized, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the maxWidth option specified. +
    +
    +
    $( ".selector" ).dialog({ maxWidth: 600 });
    +
    + + +
    + Get or set the maxWidth option, after init. +
    +
    +
    //getter
+var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );
+//setter
+$( ".selector" ).dialog( "option", "maxWidth", 600 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    minHeight

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    150
    + +
    +
    +
    +

    The minimum height to which the dialog can be resized, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the minHeight option specified. +
    +
    +
    $( ".selector" ).dialog({ minHeight: 300 });
    +
    + + +
    + Get or set the minHeight option, after init. +
    +
    +
    //getter
+var minHeight = $( ".selector" ).dialog( "option", "minHeight" );
+//setter
+$( ".selector" ).dialog( "option", "minHeight", 300 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    minWidth

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    150
    + +
    +
    +
    +

    The minimum width to which the dialog can be resized, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the minWidth option specified. +
    +
    +
    $( ".selector" ).dialog({ minWidth: 400 });
    +
    + + +
    + Get or set the minWidth option, after init. +
    +
    +
    //getter
+var minWidth = $( ".selector" ).dialog( "option", "minWidth" );
+//setter
+$( ".selector" ).dialog( "option", "minWidth", 400 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    modal

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    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.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the modal option specified. +
    +
    +
    $( ".selector" ).dialog({ modal: true });
    +
    + + +
    + Get or set the modal option, after init. +
    +
    +
    //getter
+var modal = $( ".selector" ).dialog( "option", "modal" );
+//setter
+$( ".selector" ).dialog( "option", "modal", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    position

    +
    +
    Type:
    +
    String, Array
    + +
    Default:
    +
    'center'
    + +
    +
    +
    +

    Specifies where the dialog should be displayed. Possible values:
    1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'.
    2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100])
    3) an array containing x,y position string values (e.g. ['right','top'] for top right corner).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the position option specified. +
    +
    +
    $( ".selector" ).dialog({ position: 'top' });
    +
    + + +
    + Get or set the position option, after init. +
    +
    +
    //getter
+var position = $( ".selector" ).dialog( "option", "position" );
+//setter
+$( ".selector" ).dialog( "option", "position", 'top' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    resizable

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to true, the dialog will be resizeable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the resizable option specified. +
    +
    +
    $( ".selector" ).dialog({ resizable: false });
    +
    + + +
    + Get or set the resizable option, after init. +
    +
    +
    //getter
+var resizable = $( ".selector" ).dialog( "option", "resizable" );
+//setter
+$( ".selector" ).dialog( "option", "resizable", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    show

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    The effect to be used when the dialog is opened.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the show option specified. +
    +
    +
    $( ".selector" ).dialog({ show: 'slide' });
    +
    + + +
    + Get or set the show option, after init. +
    +
    +
    //getter
+var show = $( ".selector" ).dialog( "option", "show" );
+//setter
+$( ".selector" ).dialog( "option", "show", 'slide' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    stack

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    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.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the stack option specified. +
    +
    +
    $( ".selector" ).dialog({ stack: false });
    +
    + + +
    + Get or set the stack option, after init. +
    +
    +
    //getter
+var stack = $( ".selector" ).dialog( "option", "stack" );
+//setter
+$( ".selector" ).dialog( "option", "stack", false );
    +
    + +
    +
    +
    • + + +
  • +
    +

    title

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    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.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the title option specified. +
    +
    +
    $( ".selector" ).dialog({ title: 'Dialog Title' });
    +
    + + +
    + Get or set the title option, after init. +
    +
    +
    //getter
+var title = $( ".selector" ).dialog( "option", "title" );
+//setter
+$( ".selector" ).dialog( "option", "title", 'Dialog Title' );
    +
    + +
    +
    +
    • + + +
  • +
    +

    width

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    300
    + +
    +
    +
    +

    The width of the dialog, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the width option specified. +
    +
    +
    $( ".selector" ).dialog({ width: 460 });
    +
    + + +
    + Get or set the width option, after init. +
    +
    +
    //getter
+var width = $( ".selector" ).dialog( "option", "width" );
+//setter
+$( ".selector" ).dialog( "option", "width", 460 );
    +
    + +
    +
    +
    • + + +
  • +
    +

    zIndex

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1000
    + +
    +
    +
    +

    The starting z-index for the dialog.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the zIndex option specified. +
    +
    +
    $( ".selector" ).dialog({ zIndex: 3999 });
    +
    + + +
    + Get or set the zIndex option, after init. +
    +
    +
    //getter
+var zIndex = $( ".selector" ).dialog( "option", "zIndex" );
+//setter
+$( ".selector" ).dialog( "option", "zIndex", 3999 );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    beforeClose

    +
    +
    Type:
    +
    dialogbeforeclose
    +
    +
    +
    +

    This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the beforeClose event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   beforeClose: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the beforeClose event by type: dialogbeforeclose. +
    +
    +
    $( ".selector" ).bind( "dialogbeforeclose", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    open

    +
    +
    Type:
    +
    dialogopen
    +
    +
    +
    +

    This event is triggered when dialog is opened.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the open event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   open: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the open event by type: dialogopen. +
    +
    +
    $( ".selector" ).bind( "dialogopen", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    focus

    +
    +
    Type:
    +
    dialogfocus
    +
    +
    +
    +

    This event is triggered when the dialog gains focus.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the focus event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   focus: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the focus event by type: dialogfocus. +
    +
    +
    $( ".selector" ).bind( "dialogfocus", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    dragStart

    +
    +
    Type:
    +
    dialogdragstart
    +
    +
    +
    +

    This event is triggered at the beginning of the dialog being dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the dragStart event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   dragStart: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the dragStart event by type: dialogdragstart. +
    +
    +
    $( ".selector" ).bind( "dialogdragstart", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    drag

    +
    +
    Type:
    +
    dialogdrag
    +
    +
    +
    +

    This event is triggered when the dialog is dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the drag event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   drag: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the drag event by type: dialogdrag. +
    +
    +
    $( ".selector" ).bind( "dialogdrag", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    dragStop

    +
    +
    Type:
    +
    dialogdragstop
    +
    +
    +
    +

    This event is triggered after the dialog has been dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the dragStop event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   dragStop: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the dragStop event by type: dialogdragstop. +
    +
    +
    $( ".selector" ).bind( "dialogdragstop", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    resizeStart

    +
    +
    Type:
    +
    dialogresizestart
    +
    +
    +
    +

    This event is triggered at the beginning of the dialog being resized.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the resizeStart event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   resizeStart: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the resizeStart event by type: dialogresizestart. +
    +
    +
    $( ".selector" ).bind( "dialogresizestart", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    resize

    +
    +
    Type:
    +
    dialogresize
    +
    +
    +
    +

    This event is triggered when the dialog is resized. demo

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the resize event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   resize: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the resize event by type: dialogresize. +
    +
    +
    $( ".selector" ).bind( "dialogresize", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    resizeStop

    +
    +
    Type:
    +
    dialogresizestop
    +
    +
    +
    +

    This event is triggered after the dialog has been resized.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the resizeStop event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   resizeStop: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the resizeStop event by type: dialogresizestop. +
    +
    +
    $( ".selector" ).bind( "dialogresizestop", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    close

    +
    +
    Type:
    +
    dialogclose
    +
    +
    +
    +

    This event is triggered when the dialog is closed.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the close event as an init option. +
    +
    +
    $( ".selector" ).dialog({
+   close: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the close event by type: dialogclose. +
    +
    +
    $( ".selector" ).bind( "dialogclose", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .dialog( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the dialog functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .dialog( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the dialog.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .dialog( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the dialog.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .dialog( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any dialog option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .dialog( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple dialog options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .dialog( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-dialog element.

    +
    +
    • + + +
  • +
    +

    close

    +
    +
    Signature:
    +
    .dialog( "close" + + + + + + + +)
    +
    +
    +
    +

    Close the dialog.

    +
    +
    • + + +
  • +
    +

    isOpen

    +
    +
    Signature:
    +
    .dialog( "isOpen" + + + + + + + +)
    +
    +
    +
    +

    Returns true if the dialog is currently open.

    +
    +
    • + + +
  • +
    +

    moveToTop

    +
    +
    Signature:
    +
    .dialog( "moveToTop" + + + + + + + +)
    +
    +
    +
    +

    Move the dialog to the top of the dialogs stack.

    +
    +
    • + + +
  • +
    +

    open

    +
    +
    Signature:
    +
    .dialog( "open" + + + + + + + +)
    +
    +
    +
    +

    Open the dialog.

    +
    +
    • + +
+
+
+

Theming

+

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. +

+

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. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
+   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
+      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
+      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
+   </div>
+   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
+      <p>Dialog content goes here.</p>
+   </div>
+</div>
+

+ + 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>. + +

+ +
+
+ +

+ + -- cgit v1.2.1