==== Dialog ====
A movable, resizable, brand-able dialog, optionally modal, supporting ajax content.
==== Demo ====
This example demonstrates the creation of a dialog with three initial properties. The first sets the title of the dialog, and the second sets the content of the dialog's body to contain some remote content. The autoOpen property specifies whether or not the window should be opened immediately upon creation.
**Source Code**
==== Script Example ====
In this sample, a dialog with the name of 'myDialog' is created with two initial properties. The function argument of createControl is called when the widget renders.
Create the control...
App.createControl(
'myDialog',
'jquery_dialog',
{
content: "hello..."
},
function() {
alert("created a dialog!");
}
);
Get the handle to an instance of the control...
App.getControl('myDialog', 'jquery_dialog', function() {
this.open();
});
==== Options ====
The dialog control is made up of a single div. The control tag on the div indicates what kind of widget the div will become. The widget identity can accept the following initial parameters...
Initial options supported by the widget.
^ Option ^ Description ^ Default ^ Type ^
| autoOpen | 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. | true | Bool |
| bgiframe | 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. | false | Bool |
| buttons | 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." | null | Object |
| dialogClass | The specified class name(s) will be added to the dialog, for additional theming. | null | String |
| draggable | When draggable is true the resulting dialog will be draggable. If false the dialog will not be draggable. | true | Bool |
| height | The height of the dialog, in pixels. | 200 | String |
| hide | The effect to be used when the dialog is closed. | null | Int |
| maxHeight | The maximum height to which the dialog can be resized, in pixels. | null | Int |
| maxWidth | The maximum width to which the dialog can be resized, in pixels. | null | Int |
| minHeight | The minimum height to which the dialog can be resized, in pixels. | 100 | Int |
| minWidth | The minimum width to which the dialog can be resized, in pixels. | 150 | Int |
| modal | When modal is 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. Custom style values for the overlay (e.g. changing its color or opacity) can be provided with the overlay option. | false | Bool |
| overlay | Key/value object of style properties for the overlay to display behind the dialog (but above other page elements). | null | Object |
| position | Specifies where the dialog should be displayed. Possible values: 'center', 'left', 'right', 'top', 'bottom', or an array containing a coordinate pair (in pixel offset from top left of viewport) or the possible string values (e.g. ['right','top'] for top right corner). | "center" | String |
| resizable | Specifies whether the dialog will be resizeable. Possible values: true, false. | true | Bool |
| show | The effect to be used when the dialog is opened. | null | Function |
| stack | 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. | true | Bool |
| title | Specifies the title of the dialog. The title can also be specified by the title attribute on the dialog source element. | null | String|
| width | The width of the dialog, in pixels. | 300 | Int |
| open | Callback for the dialogopen event. The function gets passed two arguments in accordance with the triggerHandler interface. | null | Function |
| focus | Callback for the dialogfocus event. The function gets passed two arguments in accordance with the triggerHandler interface. | null | Function |
| dragStart | Callback for the beginning of the dialog being dragged. | null | Function |
| drag | Callback for during the dialog being dragged. | null | Function |
| dragStop | Callback for after the dialog has been dragged. | null | Function |
| resizeStart | Callback for the beginning of the dialog being resized. | null | Function |
| resize | Callback for during the dialog being resized. | null | Function |
| resizeStop | Callback for after the dialog has been resize. | null | Function |
| close | Callback for the close.dialog event. The function gets passed two arguments in accordance with the triggerHandler interface. | null | Function |
==== Actions/JavaScript API ====
Actions accept the same argument types as their equivalent functions.
^ Function ^ Action ^ Description|
| title(str) | title[] | Change the title of the dialog.|
| open() | open | Open the dialog.|
| close() | close | Close the dialog.|
| isOpen() ^ | Returns the state of the dialog's visibility.|
| content(str) | content[] | Set the content of the body of the dialog.|