Main Parameters of jquery UI

 
Common Parameters of jquery UI dialog include:

1. autoopen: The default value is true. The dialog box is displayed when the dialog method is created.
2. Buttons: None by default. It is used to set the display button, which can be in JSON or array format:
{"OK": function () {}, "cancel": function (){}}
[{Text: "OK", click: function () {}}, {text: "cancel", click: function () {}}]
3. Modal: The default value is false. Whether the modal dialog box is displayed. If it is set to true, a mask layer is created to hide other elements on the page.
4. Title: Title
5. draggable: Indicates whether manual access is allowed. The default value is true.
6. resizable: whether to adjust the size. The default value is true.
7. Width: width, 300 by default
8. Height: height. The default value is "Auto"
Other parameters that are not commonly used:

1. closeonescape: The default value is true. Press ESC to close the dialog box.
2. Show: displays the animation effect of the dialog box.
3. Hide: Close the animation effect of the dialog box
4. position: the position displayed in the dialog box. The default value is "center", which can be set to a string or array:
'Center', 'left', 'right', 'top', 'bottom'
['Right', 'top'], using the preceding string combination (x, y)
[1, 350,100], absolute value (x, y)
5. minwidth: 150 by default, minimum width
6. minheight: The default value is 150. The minimum height is.
Usage:.The Code is as follows: $ ("..."). Dialog ({
Title: "title ",
//... More parameters
});

Main Method
Jquery UI dialog provides some methods to control the dialog box, listing only common ones:

Open: Open dialog box
Close: Close the dialog box. (The close dialog box will not be destroyed. You can continue to use it)
Destroy: Destruction dialog box
Option: set parameters, that is, the parameters listed above.
Used as a parameter of the dialog method:.The Code is as follows: var DLG = $ ("..."). Dialog ({
// Various parameters...
});
DLG. Dialog ("option", {Title: "title"}); // set parameters
DLG. Dialog ("open"); // use the open method to open the dialog box

Major Events
Jquery UI dialog provides some events, such as opening or closing the dialog box to do some additional things:

Open: When open
Close: Close
Create: at the time of creation
Resize: Hours
Drag: when dragging
The usage method is the same as that of the parameter. For example, hide the close button when opening:.The Code is as follows: $ ("..."). Dialog ({
// Various parameters...
Open: function (event, UI ){
$ (". UI-dialog-titlebar-Close", $ (this). Parent (). Hide ();
}
});

Usage
Some common prompts are encapsulated below, which are not described in detail:.The Code is as follows: jquery. Extend (jquery ,{
// Jquery UI alert pop-up prompt
Jqalert: function (text, title, FN ){
VaR html =
'<Div class = "dialog" id = "dialog-message">' +
'<P>' +
'<SPAN class = "UI-Icon UI-icon-circle-check" style = "float: Left; margin: 0 7px 0 0; "> </span> '+ TEXT +

'</P>' +
'</Div> ';
Return $ (HTML). Dialog ({
// Autoopen: false,
Resizable: false,
Modal: True,
Show :{
Effect: 'fade ',
Duration: 300
},
Title: Title | "prompt message ",
Buttons :{
"OK": function (){
VaR DLG = $ (this). Dialog ("close ");
FN & FN. Call (DLG );
}
}
});
},
// Jquery UI alert pop-up prompt, which is automatically closed after a certain interval
Jqtimeralert: function (text, title, FN, timermax ){
VaR dd = $ (
'<Div class = "dialog" id = "dialog-message">' +
'<P>' +
'<SPAN class = "UI-Icon UI-icon-circle-check" style = "float: Left; margin: 0 7px 0 0; "> </span> '+ TEXT +

'</P>' +
'</Div> ');
Dd [0]. timermax = timermax | 3;
Return dd. Dialog ({
// Autoopen: false,
Resizable: false,
Modal: True,
Show :{
Effect: 'fade ',
Duration: 300
},
Open: function (E, UI ){
VaR me = This,
DLG = $ (this ),
BTN = DLG. Parent (). Find (". UI-button-text"). Text ("OK (" + me. timermax + ")");
-- Me. timermax;
Me. Timer = Window. setinterval (function (){
BTN. Text ("OK (" + me. timermax + ")");
If (Me. timermax -- <= 0 ){
DLG. Dialog ("close ");
FN & FN. Call (DLG );
Window. clearinterval (Me. Timer); // The time reaches the time when the timer is cleared.
}
},1000 );
},
Title: Title | "prompt message ",
Buttons :{
"OK": function (){
VaR DLG = $ (this). Dialog ("close ");
FN & FN. Call (DLG );
Window. clearinterval (this. Timer); // clear the timer
}
},
Close: function (){
Window. clearinterval (this. Timer); // clear the timer
}
});
},
// Jquery UI confirm pop-up confirmation prompt
Jqconfirm: function (text, title, fn1, FN2 ){
VaR html =
'<Div class = "dialog" id = "dialog-confirm">' +
'<P>' +
'<SPAN class = "UI-Icon UI-icon-alert" style = "float: Left; margin: 0 7px 20px 0;"> </span>' + TEXT +

'</P>' +
'</Div> ';
Return $ (HTML). Dialog ({
// Autoopen: false,
Resizable: false,
Modal: True,
Show :{
Effect: 'fade ',
Duration: 300
},
Title: Title | "prompt message ",
Buttons :{
"OK": function (){
VaR DLG = $ (this). Dialog ("close ");
Fn1 & fn1.call (DLG, true );
},
"Cancel": function (){
VaR DLG = $ (this). Dialog ("close ");
FN2 & FN2 (DLG, false );
}
}
});
},
// The IFRAME window is displayed in jquery UI.
Jqopen: function (URL, options ){
VaR html =
'<Div class = "dialog" id = "dialog-window" Title = "prompt message">' +
'<IFRAME src = "' + URL + '" frameborder = "0" style = "border: 0; "scrolling =" Auto "width =" 100% "Height =" 100% "> </iframe> '+

'</Div> ';
Return $ (HTML). Dialog ($. Extend ({
Modal: True,
Closeonescape: false,
Draggable: false,
Resizable: false,
Close: function (event, UI ){
$ (This). Dialog ("Destroy"); // destroy when disabled
}
}, Options ));
},
// Jquery UI confirm prompt
Confirm: function (EVT, text, title ){
EVT = $. event. Fix (EVT );
VaR me = evt.tar get;
If (Me. confirmresult ){
Me. confirmresult = false;
Return true;
}
Jquery. jqconfirm (text, title, function (e ){
Me. confirmresult = true;
If (e ){
If (Me. href & $. Trim (Me. href). indexof ("javascript:") = 0 ){
$. Globaleval (Me. href );
Me. confirmresult = false;
Return;
}
VaR T = me. Type & me. type. tolowercase ();
If (T & me. Name & (t = "image" | T = "Submit" | T = "button ")){
_ Dopostback (Me. Name ,"");
Me. confirmresult = false;
Return;
}
If (Me. Click) me. Click (EVT );
}
Return false;
});
Return false;
}
});

The above code still has a problem, that is, it is not destroyed after the pop-up box is closed.

Solution ):

In the Close event, destroy
Set the dialog instance in alert/confirm to static
Use a single dialog instance for external calls
Demo program
The HTML code is as follows:.The Code is as follows: <div>
<Input type = "button" id = "button1" value = "normal prompt"/>
<Input type = "button" id = "button2" value = "auto-close prompt"/>
<Input type = "button" id = "button3" value = "OK"/>
<Input type = "button" id = "button4" value = "OK 2"/>
<Input type = "button" id = "button5" value = "open window"/>
</Div>

The JS Code is as follows:.The Code is as follows: $ (function (){
$ ("# Button1"). Click (function (){
$. Jqalert ("this is a normal prompt! ");
});
$ ("# Button2"). Click (function (){
$. Jqtimeralert ("this is an automatic shutdown prompt! "," Auto-close prompt ",
Function (){
$. Jqalert ("time ");
});
});
$ ("# Button3"). Click (function (){
$. Jqconfirm ("are you sure you want to do this? "," Confirmation prompt ",
Function (){
$. Jqalert ("Click OK ");
},
Function (){
$. Jqalert ("canceled ");
});
});
$ ("# Button4"). Click (function (e ){
If ($. Confirm (E, "Are you sure you want to do this? "))
$. Jqalert ("Click OK ");
});
$ ("# Button5"). Click (function (e ){
$. Jqopen ("http://www.toorain.net", {Title: "My blog", width: 700, height: 500 });

});
});

To use confirm for a server-side control, you may need the following methods:.The Code is as follows: $ ("# button4"). Click (function (e ){
If (! $. Confirm (E, "Are you sure you want to do this? ")){
E. stoppropagation ();
Return false;
}
});

Additionally, the fonts used by jquery UI are in EM units, which may increase the size of the dialog during normal use. You can set the following styles:.Code: body {font-size: 12px;} // default font size
/* Jquery UI fakes */
. UI-widget {font-size: 1em ;}
. UI-dialog. UI-dialog-buttonpane {padding-top:. 1em; padding-bottom:. 1em ;}

In this way, the size of dialog looks normal.
Use telerik radcontrols for Asp.net Ajax
Mainly for the telerik radbutton control, the following two functions are defined:.The Code is as follows: // The confirm confirmation callback for the radbutton, that is, the trigger button is clicked.
Function radcallback (s ){
Return function. createdelegate (S, function (argument ){
If (argument ){
This. Click ();
}
});
}
// Add a confirm prompt for radbutton
Function radconfirm2 (textorfn, title, callback ){
Return function (s, e ){
$. Jqconfirm (textorfn, title, callback | radcallback (s ));
// Radconfirm (textorfn, callback, 280, 50, null, title );
E. set_cancel (true );
};
}

Then you can use it like this:.The Code is as follows: <telerik: radbutton... onclientclicking = "radconfirm2 ('Are you sure you want to do this? ') "/>