基于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 相关文章推荐
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
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 exif扩展方法开启详解
2014/07/28 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
学习ExtJS border布局
2009/10/08 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
详解python中递归函数
2019/04/16 Python
python aiohttp的使用详解
2019/06/20 Python
Python流程控制常用工具详解
2020/02/24 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
运输服务质量承诺书
2014/03/27 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
离婚纠纷代理词
2015/05/23 职场文书
六一亲子活动感想
2015/08/07 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫