Jquery UI Dialog detailed (Chinese) __jquery

1 Properties

1.11 AutoOpen, when this property is true, the dialog window is automatically opened when the dialog is invoked. When the property is False, the dialog window is ejected when you first hide the window and know. Dialog ("Open"). The default is: TRUE.

1.12 Initialization Example: Please note that $ ('. Selector ') is the dialog class name, in this case. selector= #dialoag, no longer explained.

$ ('. Selector '). dialog ({autoopen:false});

1.13 After initialization, get and set this property Example:

Get

var AutoOpen = $ ('. Selector '). dialog (' option ', ' AutoOpen ');

Set up

$ ('. Selector '). dialog (' option ', ' AutoOpen ', false);

1.21 bgiframe default is False, when True, the Bgiframe plugin would be used, to fix the issue in IE6 where select boxes P of other elements, regardless of zindex. Requires including the Bgiframe plugin. Future versions May is not require a separate plugin.

Under the IE6, let the back of the gray screen cover the Select.

1.22 Initialization Example:

$ ('. Selector '). dialog ({bgiframe:true});

1.23 after initialization, get and set:

Get

var bgiframe = $ ('. Selector '). dialog (' option ', ' bgiframe ');

Set up

$ ('. Selector '). dialog (' option ', ' Bgiframe ', true);

1.31 buttons displays a button and writes the text of the button, setting the button to click on the function. Default is {}, no button.

Please note that the buttons attribute is already in use in the top example.

1.32 Initialization Example:

$ ('. Selector '). Dialog ({buttons: {"OK": function () {$ (this), dialog ("Close");}});

1.33 after initialization, get and set:

Get

var buttons = $ ('. Selector '). dialog (' option ', ' buttons ');

Set up

$ ('. Selector '). dialog (' option ', ' buttons ', {"OK": function () {$ (this). dialog ("Close");});

1.41 Closeonescape is true, click the ESC key to close dialog, the default is true;

1.42 Initialization Example:

$ ('. Selector '). dialog ({closeonescape:false});

1.43 after initialization, get and set:

Get

var closeonescape = $ ('. Selector '). dialog (' option ', ' closeonescape ');

Set up

$ ('. Selector '). dialog (' option ', ' Closeonescape ', false);

1.51 Dialogclass type will be added to dialog, default to NULL

1.52 Initialization Example:

$ ('. Selector '). Dialog ({dialogclass: ' alert '});

1.53 after initialization, get and set:

Get

var Dialogclass = $ ('. Selector '). dialog (' option ', ' dialogclass ');

Set up

$ ('. Selector '). dialog (' option ', ' Dialogclass ', ' alert ');

1.61 draggable, resizable:draggable can be dragged using the header header, default to True, can be dragged, resizable can change the size of the dialog, the default is true, you can change the size.

1.62 Initialization Example:

$ ('. Selector '). dialog ({draggable:false,resizable:false});

1.63 after initialization, get and set:

Get

var draggable = $ ('. Selector '). dialog (' option ', ' draggable ');

Set up

$ ('. Selector '). dialog (' option ', ' draggable ', false);

1.71 width, height, dialog width and height, the default is auto, Automatic.

1.72 Initialization Example:

$ ('. Selector '). dialog ({height:530,width:200});

1.73 after initialization, get and set: Please refer to 1.63

1.81 maxwidth, MaxHeight, MinWidth, MinHeight, dialog can be changed to the maximum width, maximum height, minimum width, minimum height. MaxWidth, MaxHeight defaults to false, not limited to. The default for MinWidth and MinHeight is 150. Ui.resizable.js support is required to use these properties.

1.82 Initialization Example:

$ ('. Selector '). dialog ({maxheight:400,maxwidth:600,minheight:300,minwidth:300});

1.83 after initialization, get and set: Please refer to 1.63

1.91 hide, Show, when dialog closes and opens the effect. Default is NULL, no effect

1.92 Initialization example: used in the top example, please see for yourself.

1.93 after initialization, get and set: Please refer to 1.63

1.101 modal, whether to use a modal window, when the modal window is open, the other elements of the page will not be clicked until the mode window is closed. The default is false and is not a modal window.

1.102 Initialization Example: $ ('. Selector '). dialog ({modal:true});

1.103 after initialization, get and set: Please refer to 1.63

1.111 title,dialog title text, default to empty.

1.112 Initialization example: see the top example. 1.113 after initialization, get and set: Please refer to 1.63

1.121 position, dialog display position: Can be ' center ', ' left ', ' right ', ' top ', ' bottom ', or top and left offsets can also be an array of strings such as [' Right ', ' Top '].

1.122 Initialization Example: $ ('. Selector '). dialog ({position: [' top ', ' Right ']}); 1.123 after initialization, get and set: Please refer to 1.63

1.131 zindex, dialog zindex value, the default value is 1000.

1.132 Initialization Example: $ ('. Selector '). dialog ({zindex:3999}); 1.133 after initialization, get and set: Please refer to 1.63

1.141 stack defaults to True, dialog will be on top when dialog gets the focus.

1.142 Initialization Example: $ ('. Selector '). dialog ({stack:false}); 1.143 after initialization, get and set: Please refer to 1.63

2 Events

2.11 BeforeClose Type Dialogbeforeclose, this event is triggered when Dialog tries to close, and if False, the shutdown is blocked.

2.12 Initialization Example: $ ('. Selector '). Dialog ({

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

});

2.13 Use types to bind this event Example: $ ('. Selector '). Bind (' Dialogbeforeclose ', function (event, UI) {

...

});

2.21 Close type: dialogclose, which triggers this event when dialog is closed.

2.22 Initialization Example: $ ('. Selector '). Dialog ({

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

});

2.23 use types to bind this event Example: $ ('. Selector '). Bind (' Dialogclose ', function (event, UI) {

...

});

2.3 Open Type: Dialogopen, triggered when dialog is open. (Space is limited, the omission is omitted, ah, initialization and use of type binding events can be referenced up.) ）

2.4 Focus Type: Dialogfocus, triggered when dialog is focused.

2.5 DragStart Type: DragStart, triggered when dialog drag starts.

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

2.7 DragStop Type: dragstop, triggered when dialog drag completes.

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

2.9 Resize Type: Resize, triggered when dialog is resized.

2.10 resizestop Type: resizestop, triggered when the size is changed.

3 method

3.1 Destroy, I like this Oh, destroy the earth ... Example:. dialog (' Destroy ')

3.2 Disable,dialog is not available, for example:. dialog (' Disable ');

3.3 Enable,dialog available, for example, 3.2

3.4 Close,open, Close, open dialog

3.5 option, set and get the dialog property, such as:. Dialog (' option ', Optionname, [value]), if there is no value, will be acquired.

3.6 IsOpen, returns True if dialog is open, for example:. dialog (' IsOpen ')

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