jquery ui dialog替代confirm实例分析
本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery UI库中dialog对话框功能使用全解析
对话框(dialog),是jQuery UI 非常重要的一个功能.它彻底的代替了JavaScript 的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 一.开启多个dialog 只要设置不同的id 即可实现. $('#x').dialog(); $('#y').dialog(); 二.修改dialog 样式 在弹出的dialog 对话框中,在火狐浏览器中打开Firebug 或者右击->查看 元素.可以看看dialog 的样式,对dialog 的标题背景进行修
-
jquery弹出框插件jquery.ui.dialog用法分析
本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr
-
jQuery实现dialog设置focus焦点的方法
本文实例讲述了jQuery实现dialog设置focus焦点的方法.分享给大家供大家参考.具体分析如下: 当弹出对话框,默认我们应该将焦点定位到输入的文本框,但是在dialog.show()之前写上$("#txtGroupName").focus();无法生效. 查看jQuery的官方文档后,发现dialog提供了一个focus的参数,ok,试试先~~ //显示新建项目群组对话框 function showCreateProjectGroupDialog(i) { $("#l
-
修改Jquery Dialog 位置的实现方法
今天在做一个功能的时候使用到了Jquery UI中的dialog组件,因为是一个很简单的组件,有很多功能都没有提供,比如说直接获取到dialog的位置,直接修改dialog的位置都是不行的,并且但可拖动的位置看不见的时候,这个时候就是坑了,关闭不了,也拖动不了,这个时候只能刷新页面来重新初始化界面了. 我今天解决的就是这个问题:解决这种问题有两种方式(个人认为) 1.修改属性让可拖动局域可见,进行拖动 2.不让出现可拖动区域不可见的情况. 针对第一种情况,我没有想到合适的办法.下面给出第二种情况
-
jQuery EasyUI Dialog拖不下来如何解决
使用jquery easyui可以很容易的创建很炫的前台页面,最近在使用过程中发现dialog存在一个问题: 用户将dialog拖出页面后,dialog就不能拖下来了,除非要重新打开页面,这个问题对于用户体验来说是非常重要的, 所以就开始研究easyu API看看有没有相应的函数或者事件去处理,结果发现没有现成,只好自己想了个办法: 思路如下: 使用panel的onOpen事件,取得diglog的原始left和top 当用户在拖动dialog过程中,使用panel的onMove事件取得dialo
-
jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法
本文实例讲述了jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法.分享给大家供大家参考,具体如下: 大家都知道,ArtDialog是一款非常不错的.轻量级的.基于jQuery的对话框插件,深受大家的追捧,大伙可以到一下地址进行下载: https://code.google.com/p/artdialog/ https://github.com/aui/artDialog 截止到2014年9月17日,已经有几个重大的版本v4.1.7.v5.0.4和v6.0.2,其中4.x
-
修改jquery中dialog的title属性方法(推荐)
好久都没办法尝试成功 在网上找的经测试也不行 于是在官方文档上看到了 结果终于成功了 $("#overTime").dialog({ autoOpen: false, width: 400, modal: true, title: "Dialog Title", buttons: { "确定": function () { }, "取消": function () { } } }); 在初始化的时候要写title属性(官方文档
-
jQuery Dialog对话框事件用法实例分析
本文实例讲述了jQuery Dialog对话框事件用法.分享给大家供大家参考,具体如下: Dialog对话框事件 对话框应用场景 对话框是最常用.最实用的功能. 1) 静态提示类对话框,对话框的内容是固定的 2) 动态提示类对话框,对话框内容是根据事件源变化的 3) 遮罩类对话框,对话框弹出时背景变灰并且不可选 使用jQuery UI的Dialog 组件可以轻松实现上面三种效果 Dialog组件的主要特点是可以拖动(Draggable),可以改变大小(Resizable). Dialog对话框的
-
jquery ui dialog替代confirm实例分析
本文实例讲述了jquery ui dialog替代confirm的方法.分享给大家供大家参考,具体如下: js的confirm,有的浏览器会直接屏蔽掉,导致功能无法使用,推荐使用jquery ui 的dialog功能,完美替换confirm功能 1.html代码 <div id="confirm_dialog" title="提示" style="display:none;"> </div> 把上面代码放到公用的地方 2.
-
jQuery UI插件自定义confirm确认框的方法
本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. html代码 <button id="callConfirm">Confirm!</button> <div id="d
-
jQuery UI Dialog 创建友好的弹出对话框实现代码
主要参数 jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: {"确定":function(){},"取消":function(){}} [{text:"确定", click: function(){}},{text:"取消",click:function(){}}] 3.mod
-
jQuery UI Dialog控件中的表单无法正常提交的解决方法
最近使用jQuery UI的Dialog控件时发现如果在此控件放置表单,则所有表单均无法正常提交,具体表现为: 1.提交按钮失效,点击后无任何反应. 2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog中的表单数据. 研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部.form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了 动态生成的HTML元素内.也就是说,原先在form内的表单在Dialog初始化
-
jquery ui dialog ie8出现滚动条的解决方法
此问题在UI1.7就出现,到了UI1.8也未修复,真不知道该怎么说好.. JQUI 开发提交BUG的帖子:http://dev.jqueryui.com/ticket/3623 解决办法相当不科学~ 我的解决办法,个人感觉好过那个,因为我只隐藏横的滚动条,呵呵 附上修改的代码: 修改:jquery.ui.dialog.js 复制代码 代码如下: var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-w
-
jquery ui dialog实现弹窗特效的思路及代码
今天我们用jquery ui dialog来做一个弹窗特效.我们先看下效果截图: 我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的...实现这一切,只要以下代码: 我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于jquery ui,我们做弹窗就是这么简单...当然了,大家可以看到,我还有一个插入数据的功能,这个功能,我采用了jquery 的appendto: 我先通过变量获取值,接着建了
-
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
复制代码 代码如下: $("#dialog").dialog({ bgiframe: true, autoOpen: false, position: [PosX, PosY], //alert 出来为:" , "(不含双引号),或者报错,不知什么原因. height: 300, modal: true, buttons: { '创建新账号': function() { var bValid = true; allFields.removeClass('ui-sta
-
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
经过摸索进行了扩展,增加"自动记住关闭时的位置"的功能,源码如下: 复制代码 代码如下: //myJquery.ui.dialog.ex.js //////////////////////////////////// //自动记住 jquery.ui.dialog关闭时的位置 /////////////////////////////////// (function($){ var originClose = $.ui.dialog.prototype.close; $.ui.dial
-
浅析JQuery UI Dialog的样式设置问题
最近在用一个JQUERY UI Dialog的插件,感觉特别强大,但样式设置比较麻烦,研究了俩天终于搞定了. 运行插件,需要的环境如下 <script src="../../JS/jquery-1.4.2.js" type="text/javascript"></script> <script src="../JS/jquery.ui.js" type="text/javascript">&
随机推荐
- angularjs实现猜数字大小功能
- Linux自动备份MySQL数据库脚本代码
- Angular.js中处理页面闪烁的方法详解
- angularjs封装bootstrap时间插件datetimepicker
- 如何使用PHP给图片加水印
- Android如何防止多次点击事件
- C/C++可变参数的使用
- Android中删除文件以及文件夹的命令记录
- 经测试最好用的mysql密码忘记的解决方法
- JavaScript初级教程(第三课)第1/2页
- 阿里云云服务器远程连接管理Linux服务器图文教程
- 详解如何在 CentOS 7 中安装或升级最新的内核
- php中get_cfg_var()和ini_get()的用法及区别
- Android 自定义 Toast 显示时间
- JS数组的常见用法实例
- 关于JavaScript命名空间的一些心得
- 主板常见故障分析与解决方案
- Python的Flask框架标配模板引擎Jinja2的使用教程
- 详解Maven仓库之本地仓库、远程仓库
- Scrapy抓取京东商品、豆瓣电影及代码分享