基于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实现仿Windows关机效果
Mar 10 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 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水印技术
2007/02/14 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
JS作用域链详解
2017/06/26 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
Python 转义字符详细介绍
2017/03/21 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
python tkinter canvas使用实例
2019/11/04 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
校园歌咏比赛主持词
2014/03/18 职场文书
集中采购方案
2014/06/10 职场文书
职称评定个人总结
2015/03/05 职场文书
离婚民事起诉状
2015/08/03 职场文书
英语导游欢迎词
2015/09/30 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
python利用while求100内的整数和方式
2021/11/07 Python
Python可视化学习之seaborn调色盘
2022/02/24 Python