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 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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日历[测试通过]
2008/03/27 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
javascript设计模式 接口介绍
2012/07/24 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python正则表达式经典入门教程
2017/05/22 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python实现多进程通信实例分析
2019/09/01 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
求网格中的黑点分布
2013/11/06 面试题
爱国演讲稿500字
2014/05/04 职场文书
团员自我评价范文
2015/03/10 职场文书
加薪通知
2015/04/25 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
Android中的Launch Mode详情
2022/06/05 Java/Android