AspNet中使用JQuery boxy插件的确认框


Posted in Javascript onMay 20, 2015

JQuery有不少弹出框的插件,boxy应该算的上是功能和效果都还不错的一款了。先来看一张效果图吧。

AspNet中使用JQuery boxy插件的确认框

在Web开发中经常会使用到Alert和Confirm弹出框,在Asp.Net中的删除按钮上我们常常会加上删除的确认提示,以避免误删除数据,就像上面图片那样。我们一般会写出这样的代码。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title></title>
   <script type="text/javascript">
     function confirmDel() {
       return confirm("您确认要删除吗?");
     }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <asp:Button ID="btnDel" runat="server" 
OnClientClick="return confirmDel();" Text="删除" />
  </form>
</body>
</html>

上面的代码很简单,confirm弹出框会有两个按钮,点击确定返回true,点击取消返回false。在boxy插件中也有confirm方法,调用代码如下:

$(document).ready(function() {
  $("#btnDel").click(function() {
    Boxy.confirm("您确认要删除吗?", function() { }, null);
    return false;
  });

});

Boxy的confirm方法有三个参数分别是确认信息内容,弹出框点击确定的回调函数,一些设置项比如标题。上面的代码中如果不加上return false,那么弹出框会闪现,然后删除按钮的后天事件还是执行了。加上return false,那么不管是点击确定还是取消都不会执行后台事件,这显然达不到我们的要求,看来只能打点击确定后的回调函数的主意了。可以在一个公用的js文件中将Boxy的confirm封装一下:

AspNet中使用JQuery boxy插件的确认框

页面的调用代码如下:

$(document).ready(function() {
  $("#Button1").click(function() { return confirmO(this, "您确认删除吗?") });

});

经过这样修改后,但点击弹出框的确定按钮时就会执行服务器事件了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
用jQuery中的ajax分页实现代码
Sep 20 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
如何利用node转发请求详解
Sep 17 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 #Javascript
JS中的Replace方法使用经验分享
May 20 #Javascript
jquery使用经验小结
May 20 #Javascript
js实现字符串转日期格式的方法
May 20 #Javascript
JavaScript实现带标题的图片轮播特效
May 20 #Javascript
手机端页面rem宽度自适应脚本
May 20 #Javascript
jquery实现弹出层效果实例
May 19 #Javascript
You might like
PHP如何编写易读的代码
2007/07/10 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
js断点调试心得分享(必看篇)
2017/12/08 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
Python subprocess模块详细解读
2018/01/29 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
python中几种自动微分库解析
2019/08/29 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
西式婚礼证婚词
2014/01/12 职场文书
晚宴邀请函范文
2014/01/15 职场文书
单位实习证明怎么写
2014/01/17 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
工程安全生产协议书
2014/11/21 职场文书
网吧温馨提示
2015/07/17 职场文书
Nginx进程调度问题详解
2021/09/25 Servers