基于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代码
Nov 10 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 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 Session及如何保持其不过期的方法
2015/08/18 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
javascript数组详解
2014/10/22 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python深度优先算法生成迷宫
2018/01/22 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python写入文件自动换行问题的方法
2019/07/05 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
农民工工资支付承诺函
2014/03/31 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2016春节放假通知范文
2015/08/18 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫