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 相关文章推荐
js中判断文本框是否为空的两种方法
Jul 31 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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中的正规表达式(二)
2006/10/09 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
github配置使用指南
2014/11/18 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Python LMDB库的使用示例
2021/02/14 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
优秀老师事迹材料
2014/02/05 职场文书
国旗下演讲稿
2014/05/08 职场文书
敬老月活动总结
2014/08/28 职场文书
导游词之西递宏村
2019/12/10 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android