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代码优化 事件委托篇
Nov 01 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
基于Vue开发数字输入框组件
Dec 19 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 无限级 SelectTree 类
2009/05/19 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php基本函数汇总
2015/07/09 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
js实现的在本地预览图片功能示例
2019/11/09 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
Python爬虫代理IP池实现方法
2017/01/05 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
债务授权委托书范本
2014/10/17 职场文书
新郎结婚保证书
2015/02/26 职场文书
小学运动会入场口号
2015/12/24 职场文书
Python基本的内置数据类型及使用方法
2022/04/13 Python