Jquery UI Dialog detailed

A property
1 AutoOpen, this property is true when dialog is called automatically when the dialog window is opened. When the property is false, an open

The dialog window is only ejected when you know that the. dialog ("Open") window is hidden. The default is: TRUE.
Initialization example: Note that $ ('. Selector ') is the class name of dialog, in this case. Selector= #dialoag,.
$ ('. Selector '). dialog ({autoopen:false});
After initialization, get and set this attribute example:
Get
var AutoOpen = $ ('. Selector '). dialog (' option ', ' AutoOpen ');
Set up
$ ('. Selector '). dialog (' option ', ' AutoOpen ', false);

2 Bgiframe default is False
When True, under IE6, let the rear gray screen cover the Select.
Example of initialization:
$ ('. Selector '). dialog ({bgiframe:true});
After initialization, get and set:
Get
var bgiframe = $ ('. Selector '). dialog (' option ', ' bgiframe ');
Set up
$ ('. Selector '). dialog (' option ', ' Bgiframe ', true);

3 buttons displays a button and writes the text of the button, setting the button click function. The default is {}, there is no button.
The above example already has the use of the buttons attribute, please note.
Example of initialization:
$ ('. Selector '). Dialog ({buttons: {"OK": function () {$ (this). dialog ("Close");}});
After initialization, get and set:
Get
var buttons = $ ('. Selector '). dialog (' option ', ' buttons ');
Set up
$ ('. Selector '). dialog (' option ', ' buttons ', {"OK": function () {$ (this). dialog ("Close");});

4 Closeonescape is true, click on the keyboard ESC to close dialog, the default is true;
Example of initialization:
$ ('. Selector '). dialog ({closeonescape:false});
After initialization, get and set:
Get
var closeonescape = $ ('. Selector '). dialog (' option ', ' closeonescape ');
Set up
$ ('. Selector '). dialog (' option ', ' Closeonescape ', false);

5 Dialogclass type will be added to dialog, default is empty
Example of initialization:
$ ('. Selector '). Dialog ({dialogclass: ' alert '});
After initialization, get and set:
Get
var Dialogclass = $ ('. Selector '). dialog (' option ', ' dialogclass ');
Set up
$ ('. Selector '). dialog (' option ', ' Dialogclass ', ' alert ');

6 draggable, resizable:draggable Whether you can use the header to drag, the default is true, you can drag; resizable

You can change the size of the dialog by default to True to change the size.
Example of initialization:
$ ('. Selector '). dialog ({draggable:false,resizable:false});
After initialization, get and set:
Get
var draggable = $ ('. Selector '). dialog (' option ', ' draggable ');
Set up
$ ('. Selector '). dialog (' option ', ' draggable ', false);

7 width, height, dialog width and height, default auto, Auto.
Example of initialization:
$ ('. Selector '). dialog ({height:530,width:200});
After initialization, get and set: Ibid.

8 MaxWidth, MaxHeight, MinWidth, minheight, Dialog adjustable maximum width, maximum height, minimum width, minimum height

。 MaxWidth, maxheight The default is False, is unlimited. The default for MinWidth, MinHeight is 150. To use these properties requires

Ui.resizable.js's support.
Example of initialization:
$ ('. Selector '). dialog ({maxheight:400,maxwidth:600,minheight:300,minwidth:300});
After initialization, get and set: Ibid.

9 Hide, Show, when dialog close and open when the effect. Default is NULL, no effect
Initialization example: used in the top instance, please see for yourself.
After initialization, get and set: Ibid.

Modal, whether the modal window is used or not, the other elements of the page will not be clicked until the modal window is closed. Default is False

is not a modal window.
Initialization example: $ ('. Selector '). dialog ({modal:true});
After initialization, get and set: Ibid.

Title,dialog title text, default is empty.
Initialization example: see the top instance. 1.113 after initialization, get and set: Ibid.

Position, dialog display location: Can be ' center ', ' left ', ' right ', ' top ', ' bottom ', can also be top and

The left offset can also be an array of strings such as [' Right ', ' top '].
Initialization example: $ ('. Selector '). dialog ({position: [' top ', ' Right ']}); 1.123 after initialization, get and set: Ibid.

ZIndex, the ZIndex Value of dialog, the default value is 1000.
Initialization example: $ ('. Selector '). dialog ({zindex:3999});
After initialization, get and set: Ibid.

The default value for stack is true, and when Dialog gets the focus, dialog will be on top.
Initialization example: $ ('. Selector '). dialog ({stack:false});
After initialization, get and set: Ibid.

Two events

1 BeforeClose type Dialogbeforeclose, this event will be triggered when dialog attempts to close, and if False is returned, then

Shutdown will be blocked.
Initialization example: $ ('. Selector '). Dialog ({
Beforeclose:function (event, UI) {...}
});
Use type binding for this event Example: $ ('. Selector '). Bind (' Dialogbeforeclose ', function (event, UI) {
...
});

2 Close type: Dialogclose, which triggers this event when dialog is closed.
Initialization example: $ ('. Selector '). Dialog ({
Close:function (event, UI) {...}
});
Use type binding for this event Example: $ ('. Selector '). Bind (' Dialogclose ', function (event, UI) {
...
});

3 Open Type: Dialogopen, triggered when dialog is turned on. (Space is limited, the omitted is omitted Ah, initialization examples and usage types

Binding events can be referenced up. ）

4 Focus Type: Dialogfocus, triggered when dialog gets focus.

5 DragStart Type: DragStart, triggered when dialog drag is started.

6 Drag Type: Drag, triggered when dialog is dragged.

7 dragstop Type: dragstop, triggered when dialog drag is complete.

8 Resizestart Type: Resizestart, triggered when dialog starts to change the size of the form.

9 Resize Type: Resize, triggered when dialog is changed in size.

Resizestop type: resizestop, triggered when the size is changed.

Three methods

1 Destroy, destroys the dialog box object. Example:. dialog (' Destroy ')

2 Disable, disables the dialog box. Example:. dialog (' Disable ');

3 Enable dialog box is enabled. Examples, such as 3.2

4 Close,open, Close, open dialog

5 option, set and get the dialog property, for example:. dialog (' option ', Optionname, [value]), if no value

, will be obtained.

6 IsOpen, if dialog is turned on, returns True, for example:. dialog (' IsOpen ')

7 Movetotop, move the dialog to the top, for example:. dialog (' Movetotop ')

Such as: Prompt box

function Alertdialog (msg, okclickhanler, width, height) {
var w = width | | 300;
var h = Height | | 200;
var AlertDiv = $ ("<div title= ' hint ' ></div>"). AppendTo ($ ("BODY"));
var content = Alertdiv.text (msg);
Alertdiv.dialog ({
Autoopen:true,
Height:h,
Width:w,
Modal:true,
Resizable:false,
Bgiframe:true,
Close:function (evt, UI) {
Alertdiv.dialog ("destroy");
Alertdiv.html (""). Remove ();
},
Buttons
{
OK: function () {
if (Okclickhanler && $.isfunction (Okclickhanler)) {
Okclickhanler ()
}
Alertdiv.dialog ("close");
}
}
});
}

Confirmation dialog box
function Confirmdialog (msg, title, Okclickhanler, Cancelclickhandler, width, height) {
var w = width | | 300;
var h = Height | | 200;
var Confirmdiv = $ ("<div title=" + (Title title: "Confirm") + "></div>"). AppendTo ($ ("BODY"));
var content = Confirmdiv.text (msg);
Confirmdiv.dialog ({
Autoopen:true,
Height:h,
Width:w,
Modal:true,
Resizable:false,
Bgiframe:true,
Close:function (evt, UI) {
Confirmdiv.dialog ("destroy");
Confirmdiv.html (""). Remove ();
},
Buttons
{
OK: function () {
if (Okclickhanler && $.isfunction (Okclickhanler)) {
Okclickhanler ()
}
Confirmdiv.dialog ("close");
},
"Cancel": function () {
if (Cancelclickhandler && $.isfunction (Cancelclickhandler)) {
Cancelclickhandler ()