Home > Developer > JavaScript
I recently saw this plug-in on the official website, so I took a look at it today and shared it with you. Maybe you already know
If so, skip this step and do not make a brick.
The purpose of this Jquery plug-in is to replace JavaScript's standard functions alert (), confirm (), and prompt (). This plug-in has
These features are as follows:
1: This plug-in allows you to support your own css settings. Make your website look more professional.
2: allow you to customize the title of the dialog box.
3: In IE7, you can avoid page reloading by using the JavaScript prompt () function.
4: these methods simulate the Windows mode dialog box. When you change the browser window size, it can adapt to the user
Window adjustment.
5: if you introduce the jQuery UI Draggable plugin, the plugin can be freely dragged.
Here we will talk about plug-ins for users who need them to download:
Http://labs.abeautifulsite.net/projects/js/jquery/alerts/jquery.alerts-1.1.zip
I. First, import JQuery and jquery. ui. draggable in And jquery. alerts css and 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"/>
To correctly use the alert plug-in iE, you have to add the DTD to the Page:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN ""
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Ii. 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 message to display your prompt information.
Iii. compatibility:
The alert plug-in requires that we use JQuery1.2.6 or a later jQuery package.
It has been tested to run well on IE6, IE7, FF2, FF3, Safari 3, Chrome, and Opera 9 browsers.
4. Demo: Note: Do you have introduced the dragonable plug-in the Demo, so you cannot drag it.
Test Alert
Copy codeThe Code is as follows:
JAlert ('this is a custom alert box;
<A href = \ "http://www.cnblogs.com/whitewolf/\">
This example is from the dashboard </a> ',
'Alert Dialog ');
Test Confirm
Copy codeThe Code is as follows:
JConfirm ('Can you confirm this?
<A href = \ "http://www.cnblogs.com/whitewolf/\">
This example is from the dashboard </a> ',
'Confirmation Dialog ', function (r ){
JAlert ('confirmed: '+ r, 'confirmation results ');
});
Test Prompt
Copy codeThe Code is as follows:
JPrompt ('Type something: <
A href = \ "http://www.cnblogs.com/whitewolf/\">
This example is from the dashboard </a> ',
'Whitewolf ', 'prompt Dialog', function (r ){
If (r) alert ('You entered' + r );
});
JConfirm return Solution
I thought about it today. I think lastwinter should ask this question about ASP. NET's CallBack. This is mainly because jConfirm is the CallBack,
It is asynchronous, not synchronous.
So I tried to stop the event from bubbling, and if it is set to true, it will be automatically returned. Test with LinkButton (the Button is different from the solution described later)
Now the code demo of LinkButton is pasted:
About jConfirm return DEMO
Copy codeThe Code is 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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Scripts 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"/>
</Head>
<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>
</Html>
LinkButton1 Button Click CODE
Copy codeThe Code is as follows:
Protected void button#click (object sender, EventArgs e)
{
This. Label1.Text = DateTime. Now. ToString ();
}
It mainly blocks the event's bubble event. stopPropagation (); event. preventDefault (); In jConfirm's callback function, it determines whether a callback is required,
<% = Page. ClientScript. GetPostBackClientHyperlink (LinkButton1, "") %> ;;
Click LinkButton1. The result is:
When you click Cancel, the system will not return the data. When you click OK, the system will return the update time:
The implementation of our LinkButton is to automatically return the Html code of the output client with a script, while the Button is the HTML element submit, submit,
So in the two differences, the LinkButton has a few more javascript code:
Copy codeThe Code is 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 codeThe Code is as follows:
<Input type = "hidden" name = "_ EVENTTARGET" id = "_ EVENTTARGET" value = ""/>
<Input type = "hidden" name = "_ EVENTARGUMENT" id = "_ EVENTARGUMENT" value = ""/>
The above means that if you use a Button to implement the same example, we must ensure that the code of my output client has these callback scripts for registration, and that the callback is
<% = Page. ClientScript. GetPostBackEventReference (Button1, "") %>. So I think LinkButton is more suitable.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
