Not long ago in the official website is to see this plugin, so today while there is time to look at, casually share with you. Maybe you already know.
, if so, please skip and don't shoot bricks.
The purpose of this jquery plugin is to replace JavaScript's standard function alert (), confirm (), and prompt (). This plugin has
These features are as follows:
1: This plugin allows you to support your own CSS development. Make your site look more professional.
2: Allows you to customize the title of the dialog box.
3: In IE7, you can avoid the page reload with the JavaScript prompt () function.
4: These methods simulate the Windows modal dialog box. When you change the browser window, it can adapt itself to the user
The adjustment of the window.
5: If you introduce the jquery UI draggable plugin plug-in, the plugin can also be dragged freely.
First of all, here is the download address of the plugin for people who need to download:
Http://labs.abeautifulsite.net/projects/js/jquery/alerts/jquery.alerts-1.1.zip
One: First in and jquery.alerts css, JS files.
<script src= "/path/to/jquery.js" type= "Text/javascript" ></script>
<script src= "/path/to/jquery.ui.draggable.js" type= "Text/javascript" ></script>
<script src= "/path/to/jquery.alerts.js" type= "Text/javascript" ></script>
<link href= "/path/to/jquery.alerts.css" rel= "stylesheet" type= "text/css" media= "screen"/>
In order to use the alert plugin correctly in IE, you also have to include when the DTD in page:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Two: Use
We can use this jquery plugin in the following ways.
Jalert (message, [title, callback])
JCONFIRM (message, [title, callback])
JPROMPT (message, [value, title, callback])
Note: Unlike JavaScript standard functions, we can use HTML parameters in the message to display your hints.
Three: Compatibility:
The alert plugin requires that we have to use JQuery1.2.6 or more jquery packets.
has been tested to work well in IE6, IE7, FF2, FF3, Safari 3, Chrome, Opera 9 browsers.
Four: Demo: note: In the demo there is no introduction of dragonable plug-ins so you can not drag
Test Alert
Copy Code code as follows:
Jalert (' This is a custom alert box;
<a href=\ "Http://www.cnblogs.com/whitewolf/\" >
This sample comes from the Breakers blog </a> ',
' Alert Dialog ');
Test Confirm
Copy Code code as follows:
Jconfirm (' Can you confirm this?
<a href=\ "Http://www.cnblogs.com/whitewolf/\" >
This sample comes from the Breakers blog </a> ',
' Confirmation Dialog ', function (r) {
Jalert (' confirmed: ' + R, ' confirmation Results ');
});
Test Prompt
Copy Code code as follows:
Jprompt (' Type something:<
A href=\ "http://www.cnblogs.com/whitewolf/\" >
This sample comes from the Breakers blog </a> ',
' WhiteWolf ', ' Prompt Dialog ', function (r) {
if (r) alert (' you entered ' + R);
});
about the solution of Jconfirm postback
I thought about it while I was free today. I think Lastwinter ask this question should be about asp.net return question, this is mainly jconfirm this for callback callback,
He is asynchronous, not synchronized.
So I tried to block the bubbling of the event and when the selection was true it was automatically returned. Use LinkButton Test (button is different from this solution to explain later)
Now posted out LinkButton code DEMO:
About Jconfirm Postback Demo
Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "_default"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script src= "Script/jquery-1.3.2.min.js" type= "Text/javascript" ></script>
<script src= "Script/jquery.alerts-1.1/jquery.alerts.js" type= "Text/javascript" ></script>
<link href= "Script/jquery.alerts-1.1/jquery.alerts.css" rel= "stylesheet" type= "Text/css"/>
<body>
<form id= "Form1" runat= "Server" >
<asp:linkbutton id= "LinkButton1" runat= "Server" onclick= "Button1_Click" >LinkButton</asp:LinkButton>
<asp:label id= "Label1" runat= "Server" text= "Label" ></asp:Label>
<div>
</div>
</form>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#<%=linkbutton1.clientid%>"). Click (Function (event) {
Jconfirm ("Test", "Test Jconfirm", function (r) {
if (r) {
<%= Page.ClientScript.GetPostBackClientHyperlink (LinkButton1, "")%>
}
});
Event.stoppropagation ();
Event.preventdefault ();
});
});
</script>
</body>
LinkButton1 Button Click CODE
Copy Code code as follows:
protected void Button1_Click (object sender, EventArgs e)
{
This. Label1.Text = DateTime.Now.ToString ();
}
The main is the bubble event.stoppropagation () that blocks the event first (); Event.preventdefault (); In Jconfirm's callback callback function to determine if a postback is required,
<%= Page.ClientScript.GetPostBackClientHyperlink (LinkButton1, "")%>;;
Click LinkButton1 the effect is:
Click Cancel time will not return, when OK will occur when the return update time:
The implementation of our LinkButton is in the output of the client HTML code has the script to automatically return, while button this is HTML element submit, submit,
So under these two distinctions, LinkButton has a few more JavaScript code:
Copy Code code as follows:
<script type= "Text/javascript" >
<! [cdata[
var theform = document.forms[' Form1 '];
if (!theform) {
Theform = Document.form1;
}
function __doPostBack (Eventtarget, eventargument) {
if (!theform.onsubmit | | (Theform.onsubmit ()!= false)) {
Theform.__eventtarget.value = Eventtarget;
Theform.__eventargument.value = eventargument;
Theform.submit ();
}
}
]]>
</script>
and input Hidden
Copy Code code as follows:
<input type= "hidden" name= "__eventtarget" id= "__eventtarget" value= ""/>
<input type= "hidden" name= "__eventargument" id= "__eventargument" value= ""/>
The above means that if you want to implement the same example with a button, we have to make sure that the code for my output client has these postback scripts registered, and that it is returned as
<%=page.clientscript.getpostbackeventreference (Button1, "")%>. So I think it's more suitable to use LinkButton.
