JQuery UI Dialog Create friendly Dialog box implementation code

Source: Internet
Author: User

Main Parameters
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:Copy codeThe 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:Copy codeThe 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:Copy codeThe 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:Copy codeThe 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-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-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-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:Copy codeThe 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:Copy codeThe 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://lwme.cnblogs.com/", {title: "My blog", width: 700, height: 500 });
});
});

To use confirm for a server-side control, you may need the following methods:Copy codeThe 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:Copy codeCode: 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:Copy codeThe 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:Copy codeThe Code is as follows: <telerik: RadButton... OnClientClicking = "radconfirm2 ('Are you sure you want to do this? ') "/>

End
For more information, see the jQuery UI Dialog official Demo: http://jqueryui.com/demos/dialog.
Foot home http://www.jb51.net/jiaoben/15574.html
This article demonstrates downloading lwme-jquery-ui-dialog-demo.7z
Author: jinyue
Source: http://lwme.cnblogs.com/

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.