Initialize parameters
For dialog, initialization is required first, and when the dialog function is called, if no arguments are passed, or if an object is passed, then a dialog box is initialized.
There is no parameter, which means that the following properties are supported in the current version of the JQuery UI 1.8.9, which is based on the default Settings initialization dialog box.
AutoOpen If the dialog box is displayed immediately after initialization, the default is True
Modal whether the modal dialog box defaults to False
closeonescape Whether the dialog box should be closed after the user presses the ESC key, which defaults to True
Draggable whether to allow drag, default to True
Resizable the size of the dialog box can be adjusted by default to True
The title of the title dialog box, which can be an HTML string, such as a hyperlink.
Position is used to set the location of the dialog box, there are three ways to set
1. A string that allows the value to be ' center ', ' left ', ' right ', ' top ', ' bottom '. The default value for this property is ' center ', which means that the dialog box is centered. 2. An array that contains two locations in pixels, for example,
var = {position: [dialogopts ]};
3. A string consisting of an array, for example, [' Right ', ' top ', indicating that the dialog box will be located in the upper-right corner of the window.
var dialogopts = {position: ["left", "bottom"]};
A set of properties on dimensions, in pixels.
width, default 300
Height, default ' auto '
MinWidth minimum width, default 150
MinHeight minimum height, default 150
MaxWidth Maximum width
MaxHeight Maximum Height
And about the effect of closing.
Hide when the dialog box is closed, the default is null, for example, hide: ' Slide '
Show the effect when the dialog box is open. Default is NULL
Stack
Whether the Stack dialog box is stacked on top of other dialog boxes. Default is True
ZIndex the Z-index value of the dialog box, an integer, the larger the more on top. Default 1000
Button
Buttons an object, the property name is used as the prompt text of the button, and the property value is a function, that is, the button's handler function.
Var dialogopts = { buttons: { < Span style= "color: #000000;" > "ok" : function "cancel" : < Span style= "color: #0000ff;" >function () {} }} $ (" #myDialog ). dialog (dialogopts);
IE6 Select element penetration problem
Bgiframe solves the IE6 select element penetration problem by adding an IFRAME. Default is True
This feature requires the use of script jquery.bgiframe-2.1.2, where the script is in the Development-bundle\external folder in the jquery UI compression package and 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 the popup window has a mask layer, under Chrome, if there is a vertical scroll bar, you can not drag with the mouse, only use the scroll wheel.
The note above 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 ' close ); }, cancel: function () { $ (this close '
The effect is as follows.
Methods of the dialog box
After initialization, you can use the dialog box, such as open a dialog box, close the dialog box, which needs to be done by means of a dialog box.
The method of the dialog box needs to be done by calling the dialog function and passing the method in the form of a string. For example, dialog ("Open") represents the open method that invokes the dialog box.
Open opens the dialog box, it should be noted that there is no open () method, but is called by dialog ("Open"). For example,. dialog ("Open")
Close closes the dialog box
$ (this). Dialog ('close');
Destroy destroys a dialog box, removes the dialog box function, and restores the element to its pre-initialized state.
IsOpen checks the status of the dialog box and returns True if it is already open.
Movetotop Move the dialog box to the top of the dialog box
option sets or reads the value of a property in a dialog box, and there are two ways to use it.
If the second argument is a string, if three parameters are provided, the setting is indicated, if two parameters, the read is indicated. For example. dialog ("option", Optionname, [value])
If the second argument is an object, it indicates that multiple properties are set at once.
Enable dialog box
Disable Disable dialog box
Events for dialog boxes
A variety of events are also triggered during dialog use, and we can customize the event handler to respond.
Create
Open
Focus
DragStart
Drag
DragStop
Resizestart
Resize
Resizestop
BeforeClose
Close
For example, the following sets the event handling for Open,close,beforeclose, which displays the State of the window.
VarDialogopts={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"). CSS ("Width"))==300||parseint ($ (". ui-dialog "). CSS (height "==< Span style= "color: #000000;" > 300) { return false } }; $ ( " #myDialog " ). dialog (dialogopts);
The effect is as follows
dialog box Use FAQ
A common problem is to initialize a dialog box multiple times.
The dialog box only needs to be initialized once, and multiple initializations can be problematic.
Nemikor explains the problem in the Blog, Basic usage of the JQuery UI dialog, and gives an example of the address of the example
Learning Resources
The jquery User Interface Library Learning Guide of the People's post and telecommunications publishing house is the only Chinese material currently available. Only the version is a little old, is 1.6 version.
Introduction to dialog usage in jquery