Overview of jquery UI's dialog user documentation

Overview of jquery UI's dialog user documentation
A floating window contains the title and content. You can move, resize, and close the icon '× '. If the content length exceeds the display in the dialog box content area, the scroll bar is displayed automatically. In addition, there are some common options, such as adding a button bar at the bottom and a screen in the mode window.

Official example address:

Http://jqueryui.com/demos/dialog/

· Parameter (Name: parameter type: default value)
Autoopen: Boolean: True
If it is set to true, after the page is loaded by default,

The dialog box is automatically displayed. On the contrary, the hidden status is processed.

Initial: $ ('. selector'). Dialog ({autoopen:

False });
Obtain: var autoopen =

$ ('. Selector'). Dialog ('option ',

'Autoopen ');
Settings: $ ('. selector'). Dialog ('option ',

'Autoopen', false );

Bgiframe: Boolean: false
If this parameter is set to true, the bgiframe plug-in is called.

Cannot be displayed in other controls in IE6 Browser

(Select, flash.
Initial: $ ('. selector'). Dialog ({bgiframe:

True });
Get: var bgiframe =

$ ('. Selector'). Dialog ('option ',

'Bgiframe ');
Settings: $ ('. selector'). Dialog ('option ',

'Bgiframe', true );

Buttons: Object :{}
Add buttons and processing functions for the dialog box.
Initial: $ ('. selector'). Dialog ({buttons:

{"OK": function () {$ (this). Dialog

("Close ");}}});
Get: var buttons =

$ ('. Selector'). Dialog ('option ',

'Buttons ');
Settings: $ ('. selector'). Dialog ('option ',

'Buttons', {"OK": function (){

$ (This). Dialog ("close ");}});

Closeonescape: Boolean: True
Set whether to press ESC when the dialog box is opened

Close the dialog box.
Initial: $ ('. selector'). Dialog ({

Closeonescape: false });
Get: var closeonescape =

$ ('. Selector'). Dialog ('option ',

'Closeonescape ');
Settings: $ ('. selector'). Dialog ('option ',

'Closeonescape ', false );

Dialogclass: String :''
Specifies the class name, which is displayed in

Question.
Initial: $ ('. selector'). Dialog ({

Dialogclass: 'alert '});
Get: var dialogclass =

$ ('. Selector'). Dialog ('option ',

'Dialogclass ');
Settings: $ ('. selector'). Dialog ('option ',

'Dialogclass', 'alert ');

Draggable: Boolean: True
If this parameter is set to true, you can drag the title of the dialog box.

Bar to move the window.
Initial: $ ('. selector'). Dialog ({

Draggable: false });
Get: var draggable =

$ ('. Selector'). Dialog ('option ',

'Draggable ');
Settings: $ ('. selector'). Dialog ('option ',

'Draggable', false );

Height: Number: 'auto'
Set the height of the dialog box (unit: pixels ).
Initial: $ ('. selector'). Dialog ({height:

530 });
Get: var Height =

$ ('. Selector'). Dialog ('option ',

'Height ');
Settings: $ ('. selector'). Dialog ('option ',

'Height', 530 );

Hide: String: NULL
Disable (hide) the dialog box to add animation effects.

Initial: $ ('. selector'). Dialog ({hide:

'Slide '});
Get: var hide = $ ('. selector'). Dialog

('Option', 'hide ');
Settings: $ ('. selector'). Dialog ('option ',

'Hide ', 'slide ');

Maxheight: Number: false
Set the maximum height (unit: pixels) of the dialog box ).
Initial: $ ('. selector'). Dialog ({

Maxheight: 400 });
Obtain: var maxheight =

$ ('. Selector'). Dialog ('option ',

'Maxheight ');
Settings: $ ('. selector'). Dialog ('option ',

'Maxheight', 400 );

Maxwidth: Number: false
Set the maximum width (unit: pixels) of the dialog box ).
Initial: $ ('. selector'). Dialog ({maxwidth:

600 });
Obtain: var maxwidth =

$ ('. Selector'). Dialog ('option ',

'Maxwidth ');
Settings: $ ('. selector'). Dialog ('option ',

'Width', 600 );

Minheight: Number: 150
Set the minimum height (unit: pixels) of the dialog box ).
Initial: $ ('. selector'). Dialog ({

Minheight: 300 });
Get: var minheight =

$ ('. Selector'). Dialog ('option ',

'Minheight ');
Settings: $ ('. selector'). Dialog ('option ',

'Minheight', 300 );

Minwidth: Number: 150
Set the minimum width (unit: pixels) of the dialog box ).
Initial: $ ('. selector'). Dialog ({minwidth:

400 });
Get: var minwidth =

$ ('. Selector'). Dialog ('option ',

'Minwidth ');
Settings: $ ('. selector'). Dialog ('option ',

'Minwidth', 400 );

Modal: Boolean: false
Whether the window is a mode window. If this parameter is set to true

There is a screen before all the elements.
Initial: $ ('. selector'). Dialog ({modal:

True });
Get: var modal =

$ ('. Selector'). Dialog ('option', 'modal ');

Settings: $ ('. selector'). Dialog ('option ',

'Modal', true );

Position: String, array: 'center'
Set the initial display position of the dialog box. Optional values:

'Center', 'left', 'right', 'top ',

'Bottom ', or an array ['right', 'top']
Initial: $ ('. selector'). Dialog ({position:

'Top '});
Get: var position =

$ ('. Selector'). Dialog ('option ',

'Position ');
Settings: $ ('. selector'). Dialog ('option ',

'Position', 'top ');

Resizable: Boolean: True
Set whether the dialog box can be adjusted.
Initial: $ ('. selector'). Dialog ({

Resizable: false });
Get: var resizable =

$ ('. Selector'). Dialog ('option ',

'Resizable ');
Settings: $ ('. selector'). Dialog ('option ',

'Resizable', false );

Show: String: NULL
Used to display the dialog box.
Initial: $ ('. selector'). Dialog ({show:

'Slide '});
Get: var show = $ ('. selector'). Dialog

('Option', 'show ');
Settings: $ ('. selector'). Dialog ('option ',

'Show', 'slide ');

STACK: Boolean: True
Set whether the dialog box is prefixed to another dialog box when moving

Front.
Initial: $ ('. selector'). Dialog ({Stack:

False });
Obtain: var stack =

$ ('. Selector'). Dialog ('option', 'stack ');

Settings: $ ('. selector'). Dialog ('option ',

'Stack', false );

Title: String :''
Specify the dialog box title. You can also attach a Meta in the dialog box.

Set the title in the title attribute.
Initial: $ ('. selector'). Dialog ({Title:

'Dialog title '});
Obtain: var Title =

$ ('. Selector'). Dialog ('option', 'title ');

Settings: $ ('. selector'). Dialog ('option ',

'Title', 'Dialog title ');

Width: Number: 300
Set the dialog box width (unit: pixels ).
$ ('. Selector'). Dialog ({width: 460 });

Get: var width =

$ ('. Selector'). Dialog ('option', 'width ');

Settings: $ ('. selector'). Dialog ('option ',

'Width', 460 );

Zindex: INTEGER: 1000
Set the zindex value in the dialog box.
Initial: $ ('. selector'). Dialog ({zindex:

3999 });
Get: var zindex =

$ ('. Selector'). Dialog ('option ',

'Zindex ');
Settings: $ ('. selector'). Dialog ('option ',

'Zindex', 3999 );


· Events
Beforeclose: dialogbeforeclose
This event is triggered before the dialog box is closed. If

False, the dialog box is still displayed.
Initial: $ ('. selector'). Dialog ({

Beforeclose: function (event, UI ){...}

});
Binding: $ ('. selector'). Bind

('Dialogbeforeclose', function (event, UI)

{...});

Open: dialogopen
This event is triggered when the dialog box is opened.
Initial: $ ('. selector'). Dialog ({open:

Function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('dialogopen ',

Function (event, UI ){...});

Focus: dialogfocus
This event is triggered when the dialog box gets the focus.
Initial: $ ('. selector'). Dialog ({focus:

Function (event, UI ){...}});
Binding: $ ('. selector'). Bind

('Dialogfocal ', function (event, UI ){...

});

Dragstart: dragstart
This event is triggered when the drag start dialog box is moved.
Initial: $ ('. selector'). Dialog ({

Dragstart: function (event, UI ){...}

});
Binding: $ ('. selector'). BIND ('dragstart ',

Function (event, UI ){...});

Drag: Drag
This event is triggered when the drag and drop dialog box is moved.
Initial: $ ('. selector'). Dialog ({drag:

Function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('drag ',

Function (event, UI ){...});

Dragstop: dragstop
This event is triggered when the drag-and-drop dialog box action ends.
Initial: $ ('. selector'). Dialog ({dragstop:

Function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('dragstop ',

Function (event, UI ){...});

Resizestart: resizestart
This event is triggered when the dialog box is changed.
Initial: $ ('. selector'). Dialog ({

Resizestart: function (event, UI ){...}

});
Binding: $ ('. selector'). Bind

('Resizestart', function (event, UI ){...

});

Resize: resize
This event is triggered when the dialog box size changes.
Initial: $ ('. selector'). Dialog ({resize:

Function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('resize ',

Function (event, UI ){...});

Resizestop: resizestop
This event is triggered when the dialog box size changes.
Initial: $ ('. selector'). Dialog ({

Resizestop: function (event, UI ){...}

});
Binding: $ ('. selector'). BIND ('resizestop ',

Function (event, UI ){...});

Close: dialogclose
This event is triggered when the dialog box is closed.
Initial: $ ('. selector'). Dialog ({close:

Function (event, UI ){...}});
Binding: $ ('. selector'). Bind

('Dialogclose', function (event, UI ){...

});


· Attributes
Destroy
Destroy dialog box objects.
Usage:. Dialog ('deststroy ')

Disable
Disable dialog box.
Usage:. Dialog ('disable ')

Enable
Enable dialog box.
Usage:. Dialog ('enable ')

Option
Obtain or set the properties of the dialog box.
Usage:. Dialog ('option', optionname,

[Value])

Close
Close the dialog box.
Usage:. Dialog ('close ')

Isopen
Determines whether the dialog box is opened.
Usage:. Dialog ('isopen ')

Movetotop
Move the dialog box to the top-level display.
Usage:. Dialog ('movetotop ')

Open
Open the dialog box.
Usage:. Dialog ('open ')