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 相关文章推荐
Javascript this 的一些学习总结
Aug 31 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 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 xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php中$this-&amp;gt;含义分析
2009/11/29 PHP
基于php下载文件的详解
2013/06/02 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
PHP中16个高危函数整理
2019/09/19 PHP
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
jquery实现拖动效果
2016/08/10 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python列表切片用法示例
2017/04/19 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
Python如何读写二进制数组数据
2020/08/01 Python
Python截图并保存的具体实例
2021/01/14 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
马云的职业生涯规划之路
2014/01/01 职场文书
三个儿子教学反思
2014/02/03 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
操行评语大全
2014/04/30 职场文书
房地产开发项目建议书
2014/05/16 职场文书
五四青年节演讲稿
2014/05/26 职场文书
还款承诺书范本
2015/01/20 职场文书