Use of jquery UI Dialog

Document directory

• Initialization parameters
• Dialog Box Method
• Dialog Box events
• Dialog Box FAQs
• Learning Resources

In the previous article, I shared the simple use of jquery UI dialog. When so many people are learning, I will summarize the usage of jquery UI dialog, it also lays a foundation for learning other jquery UIS.

 

Initialization parameters

For dialog, Initialization is required first. When the dialog function is called, if no parameter is passed or an object is passed, a dialog box is initialized.

No parameter. It indicates that the default setting initialization dialog box is used. In jquery UI 1.8.9 of the latest version, dialog supports the following attributes.

Whether to display the dialog box immediately after autoopen initialization. The default value is true.

Modal mode dialog box. The default value is false.

Closeonescape: whether to close the dialog box after you Press ESC. The default value is true.

Whether draggable can be dragged. The default value is true.

Whether resizable can adjust the dialog box size. The default value is true.

The title of the title dialog box, which can be an HTML string, for example, a hyperlink.

Position is used to set the location of the dialog box. There are three ways to set the position.

1. A string with values 'center', 'left', 'right', 'top', and 'bottom '. the default value of this attribute is 'center', indicating that the dialog box is centered.
2. An array containing two positions in pixels, for example,

VaR dialogopts = {
Position: [100,100]
};

3. An array composed of strings. For example, ['right', 'top'] indicates that the dialog box is located in the upper right corner of the window.

VaR dialogopts = {
Position: ["Left", "bottom"]
};

 

A set of dimensions, in pixels.

Width, 300 by default

Height height. The default value is 'auto'

Min width. The default value is 150.

Min height, 150 by default

Maxwidth

Maxheight

 

There is also the effect of disabling

The effect of hide when the dialog box is closed. The default value is null. For example, hide: 'slide'

Show effect when the dialog box is opened. The default value is null.

 

Stack

Whether the stack dialog box is stacked on other dialogs. The default value is true.

The Z-index value in the zindex dialog box. an integer. The default value is 1000.

 

Button

Buttons is an object, and the attribute name will be used as the prompt Text of the button. The attribute value is a function, that is, the processing function of the button.

VaR dialogopts = {
Buttons :{
"OK": function (){},
"Cancel": function (){}
}
}
$ ("# Mydialog"). Dialog (dialogopts );

 

Select element penetration in IE6

Bgiframe solves the select element penetration problem of IE6 by adding an IFRAME. The default value is true.

This feature requires the use of the script jquery. bgiframe-2.1.2, the script in the jquery UI compressed package development-bundle \ external Folder, the file needs to be added to the page.

<SCRIPT src = "../jquery-1.4.4.js"> </SCRIPT>
<SCRIPT src = ".../external/jquery. bgiframe-2.1.2.js"> </SCRIPT>
<SCRIPT src = "../UI/jquery. UI. Core. js"> </SCRIPT>

 

This control now has a bug. In the case of a mask layer in the pop-up window, if a vertical scroll bar appears in chrome, you cannot drag it with the mouse. You can only use the scroll wheel.

The preceding description is from Wang Yang.

Before setting

After setting

 

Example

$ ("# Dialog"). Dialog ({
Bgiframe: True,
Resizable: false,
Height: 140,
Modal: True,
Overlay :{
Backgroundcolor: '#000 ',
Opacity: 0.5
},
Buttons :{
'Delete all items in recycle bin': function (){
$ (This). Dialog ('close ');
},
Cancel: function (){
$ (This). Dialog ('close ');
}
}
});

The effect is as follows.

 

Dialog Box Method

After initialization, you can use a dialog box. For example, to open a dialog box and close the dialog box, you need to use a dialog box.

The method of the dialog box must be completed by calling the dialog function and passing a string method. For example, Dialog ("open") indicates to call the open method of the dialog box.

In the open dialog box, note that there is no open () method, but it is called through dialog ("open. For example,. Dialog ("open ")

Close dialog box

$ (This). Dialog ('close ');

Destroy destroys a dialog box, removes the dialog box function, and restores the elements to the status before initialization.

The status of the isopen check dialog box. If yes, true is returned.

Movetotop move the dialog box to the top of the dialog box

Option can be used to set or read the value of an attribute in the dialog box.

If the second parameter is a string, if three parameters are provided, the parameter is set. If two parameters are provided, the parameter is read. For example,. Dialog ("option", optionname, [value])

If the second parameter is an object, multiple attributes are set at one time.

Enable dialog box

Disable dialog box

Dialog Box events

In the dialog box, multiple events are triggered. You can customize the event processing function to respond.

Create

Open

Focus

Dragstart

Drag

Dragstop

Resizestart

Resize

Resizestop

Beforeclose

Close

For example, the following sets open, close, beforeclose event processing to display the window status.

VaR dialogopts = {
Open: function (){
$ ("# Status"). Find (". UI-widget-content"). Text ("the dialog is open ");
},
Close: function (){
$ ("# Status"). Find (". UI-widget-content"). Text ("the dialog is closed ");
},
Beforeclose: function (){
If (parseint ($ (". UI-dialog" width .css ("width") = 300 |
Parseint ($ (". UI-dialog" ).css ("height") = 300 ){
Return false
}
}
};
$ ("# Mydialog"). Dialog (dialogopts );

The effect is as follows:

 

Dialog Box FAQs

A common problem is to initialize a dialog box multiple times.

The dialog box only needs to be initialized once. There may be problems with multiple initialization times.

Nemikor explains this problem in the blog: basic usage of the jquery UI dialog, and provides an example.

Learning Resources

The jquery user interface library Learning Guide of People's post and telecommunications Publishing House is currently the only Chinese document. But the version is a little old. It's version 1.6.