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/
