基于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 相关文章推荐
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
js导出txt示例代码
Jan 14 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
js 作用域和变量详解
Feb 16 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
Vuex的热更替如何实现
Jun 05 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
python编写暴力破解FTP密码小工具
2014/11/19 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
python 函数中的参数类型
2020/02/11 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
ORACLE十问
2015/04/20 面试题
个人自我鉴定范文
2013/10/04 职场文书
交通志愿者活动总结
2014/06/27 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
公司收款委托书范本
2014/09/20 职场文书
参观邀请函范文
2015/02/02 职场文书
常住证明范本
2015/06/23 职场文书
微信早安问候语
2015/11/10 职场文书
趣味运动会口号
2015/12/24 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android