jquery ui dialog替代confirm实例分析


Posted in Javascript onJanuary 25, 2016

本文实例讲述了jquery ui dialog替代confirm的方法。分享给大家供大家参考,具体如下:

js的confirm,有的浏览器会直接屏蔽掉,导致功能无法使用,推荐使用jquery ui 的dialog功能,完美替换confirm功能

1、html代码

<div id="confirm_dialog" title="提示" style="display:none;">
</div>

把上面代码放到公用的地方

2、模拟confirm js代码

var common = {
  confirm_act:function(dialog_id,msg,callback) {
    $("#"+dialog_id).html("<p class='message'>"+msg+"</p>");
    $("#"+dialog_id).dialog({
      resizable: false,
      modal: true,
      overlay: {
        backgroundColor: '#000',
        opacity: 0.5
      },
      buttons: {
        '确认': function() {
          callback.call();
          $(this).dialog('close');
        },
        '取消': function() {
          $(this).dialog('close');
        }
      }
     });
  }
}

定义了一个方法confirm_act,放到公用js文件中,第一个参数,弹层的ID,第二个参数是提示消息,第三个,是回调函数。
注意,调用回调函数时,要用js的call()函数,这个回调函数可以带参数,也可以再包含回调函数。

3、回调js代码

var recommend = {
  delete: function(url,obj)
  {
    $.ajax({
      url: url,
      type: "get",
      success:function(data)
      {
        ............省略..........
      }
    });
  }
}

4、怎么调用

$('.recommended_delete').click(function(){
  var obj = this;  //重命名
  common.confirm_act('confirm_dialog',$(obj).attr('msg'),function(){recommend.delete($(obj).attr('url'),obj)});
});

注意,如果函数中要传this,注意要重新定义

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 #Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 #Javascript
详解jquery事件delegate()的使用方法
Jan 25 #Javascript
AngularJS中的Directive实现延迟加载
Jan 25 #Javascript
AngularJS中的Directive自定义一个表格
Jan 25 #Javascript
理解JavaScript事件对象
Jan 25 #Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 #Javascript
You might like
深入PHP变量存储的详解
2013/06/13 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
node.js中的require使用详解
2014/12/15 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python调用私有属性的方法总结
2020/07/24 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
缴纳养老保险的证明
2014/01/10 职场文书
文艺晚会开场白
2015/05/29 职场文书
自书遗嘱范文
2015/08/07 职场文书