基于jQuery的弹出警告对话框美化插件(警告,确认和提示)


Posted in Javascript onJune 10, 2010

前不久在官方网站是看见这个插件,所以今天趁有空就看了一下,随便给大家共享一下。也许你早已知道了

,如果是这样那请跳过,不要拍砖。

这个Jquery插件的目的是替代JavaScript的标准函数alert(),confirm(),和 prompt()。这个插件有

如下这些特点:

1:这个插件可以使你可以支持你自己的css制定。使你的网站看起来更专业。

2:允许你自定义对话框的标题。

3:在IE7中,可以使你避免使用JavaScript 的prompt()函数带来的页面重新加载。

4:这些方法都模拟了Windows的模式对话框。在你改变改变浏览器窗口大小时候,它能够自适应用户

窗口的调整。

5:如果你引入了jQuery UI Draggable plugin插件,那这个插件也可以被自由拖动。

先在这里说插件的下载地址,以供有需之人下载:

http://labs.abeautifulsite.net/projects/js/jquery/alerts/jquery.alerts-1.1.zip

一:首先在<head></head>导入JQuery,jquery.ui.draggable
和jquery.alerts的 css、js文件。
<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" />

为了在iE中正确的使用alert插件,你还得在Page中加入何时DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二:使用
我们可以用下列方式来使用这个Jquery插件。

jAlert(message, [title, callback])
jConfirm(message, [title, callback])
jPrompt(message, [value, title, callback])
注:不同于Javascript标准函数,我们可以在message中使用HTML参数显示你的提示信息。

三:兼容性:
alert插件要求我们必须使用JQuery1.2.6或以上的jQuery包。

已经被测试能够在IE6、IE7、FF2、FF3、Safari 3 、Chrome 、Opera 9浏览器上很好的运行。

四:Demo:注:在Demo中么有引入dragonable插件所以不能拖拽
Test Alert

jAlert('This is a custom alert box; 
<a href=\"http://www.cnblogs.com/whitewolf/\"> 
本示例来自破浪博客</a>', 
'Alert Dialog');

Test Confirm
jConfirm('Can you confirm this? 
<a href=\"http://www.cnblogs.com/whitewolf/\"> 
本示例来自破浪博客</a>', 
'Confirmation Dialog', function(r) { 
jAlert('Confirmed: ' + r, 'Confirmation Results'); 
});

Test Prompt
jPrompt('Type something:< 
a href=\"http://www.cnblogs.com/whitewolf/\"> 
本示例来自破浪博客</a>', 
'WhiteWolf', 'Prompt Dialog', function(r) { 
if( r ) alert('You entered ' + r); 
});

关于jConfirm回传的解决方案
我趁今天有空就考虑了下。我觉得lastwinter问这个问题应该是关于ASP.NET的回传问题,这主要是jConfirm这个为CallBack回调,
他是异步的,并非同步。
所以我尝试了下阻止事件的冒泡,并当选择为true是自动回传。用LinkButton测试(Button不同于这个解决的方案在后面解释)
现贴出LinkButton的CODE DEMO:
关于jConfirm回传DEMO
<%@ 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> 
<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" /> 
</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
protected void Button1_Click(object sender, EventArgs e) 
{ 
this.Label1.Text = DateTime.Now.ToString(); 
}

主要为先阻止事件的冒泡event.stopPropagation();event.preventDefault(); 在jConfirm的callback回调函数中判断是否需要回传,
<%= Page.ClientScript.GetPostBackClientHyperlink(LinkButton1,"") %>;;
点击LinkButton1是效果为:
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
点击Cancel时候就不会回传,当ok时候就会发生回传更新时间:
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
对于我们的LinkButton的实现是在输出的客户端Html代码有脚本自动回传,而Button这是HTML元素submit,提交,
所以在这两个的区别下,LinkButton就多了几处javascript 代码:
<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>

和 input Hidden
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

上面所说的意思就是如果要用Button实现同样的示例,我们必须保证我的输出客户端的代码有这些回传脚本注册,还有就是回传为
<%=Page.ClientScript.GetPostBackEventReference(Button1,"") %>。所以我觉得用LinkButton更适合。
Javascript 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 #Javascript
jQuery创建自己的插件(自定义插件)的方法
Jun 10 #Javascript
jQuery-ui中自动完成实现方法
Jun 10 #Javascript
Array.prototype.slice 使用扩展
Jun 09 #Javascript
Confirmer JQuery确认对话框组件
Jun 09 #Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 #Javascript
JavaScript 原型与继承说明
Jun 09 #Javascript
You might like
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
php实现递归的三种基本方式
2020/07/04 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python采集腾讯新闻实例
2014/07/10 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
python创造虚拟环境方法总结
2019/03/04 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
社区活动邀请函范文
2014/01/29 职场文书
护理专业自荐书
2014/06/04 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
先进个人推荐材料
2014/12/29 职场文书
工作经验交流材料
2014/12/30 职场文书
2015年工程部工作总结
2015/04/30 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
Java对文件的读写操作方法
2022/04/29 Java/Android