Jquery dialog Introduction

Last Update:2018-12-07 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1 attribute

1.11 autoopen: When this attribute is true, the dialog window is automatically opened when the dialog is called. When the attribute is false, the dialog box is hidden at the beginning and the. Dialog ("open") dialog box is displayed. The default value is true.

1.12 initialization example: note that $ ('. selector') is the class name of dialog. In this example,. selector = # dialoag, which will not be described later.

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

1.13 after initialization, you can obtain and set this property example:

// Obtain

VaR autoopen = $ ('. selector'). Dialog ('option', 'autoopen ');

// Set

$ ('. Selector'). Dialog ('option', 'autoopen', false );

1.21 bgiframe defaults to false, 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.

In IE6, let the gray screen behind cover the select.

1.22 initialization example:

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

1.23 after initialization, get and set:

// Obtain

VaR bgiframe = $ ('. selector'). Dialog ('option', 'bgiframe ');

// Set

$ ('. Selector'). Dialog ('option', 'bgiframe', true );

1.31 buttons displays a button, writes the text of the button, and sets the button to click the function. The default value is {}, with no buttons.

Note that the buttons attribute is used in the preceding example.

1.32 initialization example:

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

1.33 after initialization, get and set:

// Obtain

VaR buttons = $ ('. selector'). Dialog ('option', 'buttons ');

// Set

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

1.41 when closeonescape is set to true, click the ESC key on the keyboard to disable the dialog. The default value is true;

1.42 initialization example:

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

1.43 after initialization, get and set:

// Obtain

VaR closeonescape = $ ('. selector'). Dialog ('option', 'closeonescape ');

// Set

$ ('. Selector'). Dialog ('option', 'closeonescape ', false );

1.51 The dialogclass type will be added to the dialog. The default value is null.

1.52 initialization example:

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

1.53 after initialization, get and set:

// Obtain

VaR dialogclass = $ ('. selector'). Dialog ('option', 'dialogclass ');

// Set

$ ('. Selector'). Dialog ('option', 'dialogclass', 'alert ');

1.61 draggable and resizable: whether draggable can be dragged using the title header. The default value is true, which can be dragged; whether resizable can change the size of the dialog. The default value is true, which can be changed.

1.62 initialization example:

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

1.63 after initialization, get and set:

// Obtain

VaR draggable = $ ('. selector'). Dialog ('option', 'draggable ');

// Set

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

1.71 width, height, dialog width and height. The default value is auto.

1.72 initialization example:

$ ('. Selector'). Dialog ({Height: 530, width: 200 });

1.73 get and set after initialization: Refer to 1.63

1.81 maxwidth, maxheight, minwidth, and minheight. The dialog options include the maximum width, maximum height, minimum width, and minimum height. The default value of maxwidth and maxheight is false. The default value of minwidth and minheight is 150. To use these attributes, the support of UI. resizable. JS is required.

1.82 initialization example:

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

1.83 get and set after initialization: Refer to 1.63

1.91 Effect of hide and show when dialog is closed and opened. The default value is null, with no effect.

1.92 initialization example: it is used in the top instance. See it for yourself.

1.93 get and set after initialization: Refer to 1.63

1.101 modal: whether to use the mode window. After the mode window is opened, other elements on the page cannot be clicked until the mode window is closed. The default value is false, not the mode window.

1.102 initialization example: $ ('. selector'). Dialog ({modal: true });

1.103 get and set after initialization: Refer to 1.63

1.111 title: The title text of dialog. It is blank by default.

1.112 initialization example: see the top instance. 1.113 get and set after initialization: Refer to 1.63

1.121 position, dialog display position: it can be 'center', 'left', 'right', 'top', 'bottom ', the offset between top and left can also be a string array, for example, ['right', 'top'].

1.122 initialization example: $ ('. selector'). Dialog ({position: ['top', 'right']}); 1.123 after initialization, get and set: Refer to 1.63

1.131 zindex: The zindex value of dialog. The default value is 1000.

1.132 initialization example: $ ('. selector'). Dialog ({zindex: 3999}); 1.133 after initialization, get and set: Refer to 1.63

1.141 The default value of stack is true. When dialog gets the focus, dialog will be at the top.

1.142 initialization example: $ ('. selector'). Dialog ({Stack: false}); 1.143 after initialization, get and set: Refer to 1.63

2 events

2.11 beforeclose type dialogbeforeclose: this event is triggered when the dialog attempt is disabled. If false is returned, the shutdown will be blocked.

2.12 initialization example: $ ('. selector'). Dialog ({

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

});

2.13 bind the event type. For example, $ ('. selector'). BIND ('dialogbeforeclose', function (event, UI ){

...

});

2.21 close type: dialogclose. This event is triggered when dialog is disabled.

2.22 initialization example: $ ('. selector'). Dialog ({

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

});

2.23 bind the event type. For example, $ ('. selector'). BIND ('dialogclose', function (event, UI ){

...

});

2.3 Open Type: dialogopen, triggered when dialog is enabled. (If the length is limited, the omitted content will be omitted. For initialization examples and Use Type Binding events, refer to the above .)

2.4 focus type: dialogfocus, triggered when dialog obtains focus.

2.5 dragstart type: dragstart, triggered when dialog is dragged.

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

2.7 dragstop type: dragstop, triggered when the dialog drag is complete.

2.8 resizestart type: resizestart, triggered when the dialog begins to change the form size.

2.9 resize type: resize, triggered when the dialog is changed.

2.10 resizestop type: resizestop, triggered when the change is complete.

3 Method

3.1 destroy, I like this. Destroy the earth... Example:. Dialog ('deststroy ')

3.2 disable and dialog are unavailable, for example,. Dialog ('disable ');

3.3 enable and dialog available, for example, 3.2

3.4 close, open, close, open dialog

3.5 option: Set and obtain the dialog attribute, for example,. Dialog ('option', optionname, [value]). If there is no value, it is obtained.

3.6 isopen. If dialog is enabled, true is returned, for example,. Dialog ('isopen ')

3.7 movetotop: Move the dialog to the top layer, for example,. Dialog ('movetotop ')