JQuery UI Dialog Create friendly pop-up dialog box to implement code _jquery

Source: Internet
Author: User
Main parameters
The common parameters for JQuery UI dialog are:

1, AutoOpen: Default True, that is, the dialog method is created to display the dialog box
2, buttons: Default None, used to set the button to display, can be JSON and array form:
{OK: function () {}, Cancel: function () {}}}
[{text: OK, click:function () {}},{text: Cancel, Click:function () {}}]
3, modal: Default false, modal dialog box, if set to True will create a mask layer to cover the other elements of the page
4, Title: titles
5, Draggable: Can manually, the default true
6, resizable: whether the size can be adjusted by default true
7, Width: breadth, default 300
8, Height: High, the default "auto"
Some of the other less common parameters:

1, Closeonescape: Default true, press Esc key to close the dialog box
2, Show: Open the dialog box animation effect
3, Hide: Close the animation effect of the dialog box
4, Position: dialog box display location, default "center" can be set to a string or array:
' Center ', ' left ', ' right ', ' top ', ' bottom '
[' Right ', ' top '], through several string combinations above (x,y)
[350,100], absolute value (x,y)
5, MinWidth: Default 150, Minimum width
6, MinHeight: Default 150, Minimum height
How to use:
Copy Code code as follows:

$ ("..."). Dialog ({
Title: "Caption",
//... More parameters
});

Main methods
The JQuery UI dialog provides a number of ways to control dialog boxes, listing only the common:

Open: Opening dialog box
Close: Closes the dialog box (not destroyed by closing and continues to use)
Destroy: Destroy dialog box
Option: Set parameters, that is, the parameters listed earlier
When used as a parameter to the dialog method:
Copy Code code as follows:

var dlg = $ ("..."). Dialog ({
//... Various parameters
});
Dlg.dialog ("option", {title: "title"}); Setting parameters
Dlg.dialog ("open"); Open a dialog box by using the Open method

Major Events
The JQuery UI dialog provides events such as doing something extra when you open and close a dialog box:

Open: When opened
Close: When closed
Create: When created
Resize: Adjust the big hours
Drag: When dragging
Use methods that use the same parameters, such as hiding the Close button when you open:
Copy Code code as follows:

$ ("..."). Dialog ({
//... Various parameters
Open:function (event, UI) {
$ (". Ui-dialog-titlebar-close", $ (this). Parent ()). Hide ();
}
});

Specific use
The following encapsulates some of the commonly used hints that are not explained in detail:
Copy Code code 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 | | "Hint Info",
Buttons: {
OK: function () {
var dlg = $ (this). dialog ("Close");
fn && Fn.call (DLG);
}
}
});
},
JQuery UI alert pop-up prompt, automatic shutdown 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); Time to clear the timer.
}
}, 1000);
},
Title:title | | "Hint Info",
Buttons: {
OK: function () {
var dlg = $ (this). dialog ("Close");
fn && Fn.call (DLG);
Window.clearinterval (This.timer); Clear Timer
}
},
Close:function () {
Window.clearinterval (This.timer); Clear Timer
}
});
},
JQuery UI Confirm Popup 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 | | "Hint Info",
Buttons: {
OK: function () {
var dlg = $ (this). dialog ("Close");
FN1 && Fn1.call (DLG, true);
},
"Cancel": function () {
var dlg = $ (this). dialog ("Close");
Fn2 && fn2 (DLG, false);
}
}
});
},
JQuery UI pop-up iframe window
Jqopen:function (URL, options) {
var html =
' <div class= ' dialog ' id= ' Dialog-window ' title= ' 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 at shutdown
}
}, Options));
},
JQuery UI Confirm Hints
Confirm:function (evt, text, title) {
EVT = $.event.fix (evt);
var me = Evt.target;
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;
}
});

One problem with the above code is that every time the pop-up box is closed, it is not destroyed.

Solutions are (specifically not demonstrated):

In the Close event destroy
Set the dialog instance in the Alert/confirm provider to a static
Using a single dialog instance on an external call
Demo Program
The HTML code is as follows:
Copy Code code as follows:

<div>
<input type= "button" id= "button1" value= "normal hint"/>
<input type= "button" id= "Button2" value= "auto close Prompt"/>
<input type= "button" id= "Button3" value= "Confirmation Prompt"/>
<input type= "button" id= "Button4" value= "confirmation hint 2"/>
<input type= "button" id= "Button5" value= "open Window"/>
</div>

The corresponding JS code is as follows:
Copy Code code as follows:

$ (function () {
$ ("#button1"). Click (function () {
$.jqalert ("This is a general hint!") ");
});
$ ("#button2"). Click (function () {
$.jqtimeralert ("This is the tip of automatic shutdown!") ", Auto close Prompt",
function () {
$.jqalert ("Time to");
});
});
$ ("#button3"). Click (function () {
$.jqconfirm (Are you sure you want to do this?) "," Confirmation Prompt ",
function () {
$.jqalert ("point OK");
},
function () {
$.jqalert ("Point canceled");
});
});
$ ("#button4"). Click (function (e) {
if ($.confirm e, are you sure you want to do this?) "))
$.jqalert ("point OK");
});
$ ("#button5"). Click (function (e) {
$.jqopen ("http://lwme.cnblogs.com/", {title: "My Blog", width:700, height:500});
});
});

For server-side controls to use confirm, you might need the following methods:
Copy Code code as follows:

$ ("#button4"). Click (function (e) {
if (!$.confirm e, are you sure you want to do this?) ")) {
E.stoppropagation ();
return false;
}
});

To put it another way, the JQuery UI uses a font that is in EM, which may cause dialog to become larger when used in common use, and you can set the following extra styles:
Copy Code code as follows:

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 the dialog looks more normal.
Used in Telerik RadControls for ASP.net ajax
Primarily for Telerik Radbutton controls, define the following two functions:
Copy Code code as follows:

Confirm confirmation callback for Radbutton, which is the trigger button click
function Radcallback (s) {
Return Function.createdelegate (S, Function (argument) {
if (argument) {
This.click ();
}
});
}
Use to add confirm hints for Radbutton
function Radconfirm2 (TEXTORFN, title, callback) {
return function (S, e) {
$.jqconfirm (TEXTORFN, title, callback | | Radcallback (s));
Radconfirm (TEXTORFN, callback, 280, NULL, title);
E.set_cancel (TRUE);
};
}

You can then use this:
Copy Code code as follows:
<telerik:radbutton ... onclientclicking= "Radconfirm2 (' sure you want to do this? ')"/>


End
For more information, see the jquery UI dialog official demo: Http://jqueryui.com/demos/dialog.
Cloud Habitat Community Download address http://www.jb51.net/jiaoben/15574.html
This article demonstrates downloading lwme-jquery-ui-dialog-demo.7z
Author: Embarrassing month
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.