为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能


Posted in Javascript onNovember 24, 2009
$("#dialog").dialog({ 
bgiframe: true, 
autoOpen: false, 
position: [PosX, PosY], //alert 出来为:" , "(不含双引号),或者报错,不知什么原因。 
height: 300, 
modal: true, 
buttons: { 
'创建新账号': function() { 
var bValid = true; 
allFields.removeClass('ui-state-error'); bValid = bValid && checkLength(name, "username", 3, 16); 
bValid = bValid && checkLength(email, "email", 6, 80); 
bValid = bValid && checkLength(password, "password", 5, 16); 
bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter."); 
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ 
bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com"); 
bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9"); 
if (bValid) { 
$('#users tbody').append('<tr>' + 
'<td>' + name.val() + '</td>' + 
'<td>' + email.val() + '</td>' + 
'<td>' + password.val() + '</td>' + 
'</tr>'); 
$(this).dialog('close'); 
}; 
}, 
取消: function() { 
$(this).dialog('close'); 
} 
}, 
close: function() { 
allFields.val('').removeClass('ui-state-error'); 
} 
});

后来参考"wind"的为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能。,在他的建议下,完全照葫芦画瓢写了个jquery.ui.dialog的重载方法,实现在鼠标当前位置打开dialog

代码如下

/////////////////////////////////// 
//指定 jquery.ui.dialog打开时的位置 
/////////////////////////////////// 
(function($) { 
var originOpen = $.ui.dialog.prototype.open 
$.ui.dialog.prototype.open = function() { 
//var event= window.event || arguments.callee.caller.arguments[0]; 
//var event = event || window.event; 
var event = getEvent(); 
//alert(event) // ie 和 ff下,都显示 "[object]" 
var PosX = 0; 
var PosY = 0; 
if (event.pageX || event.pageY) { 
PosX = event.pageX; 
PosY = event.pageY; 
} 
else { 
PosX = event.clientX + document.body.scrollLeft - document.body.clientLeft; 
PosY = event.clientY + document.body.scrollTop - document.body.clientTop; 
}; 
this.options.position = [PosX, PosY]; 
//alert(this.options.position); 
originOpen.apply(this, arguments); 
}; function getEvent() { //同时兼容ie和ff的写法 
if (document.all) return window.event; 
func = getEvent.caller; 
while (func != null) { 
var arg0 = func.arguments[0]; 
if (arg0) { 
if ((arg0.constructor == Event || arg0.constructor == MouseEvent) 
|| (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) { 
return arg0; 
} 
} 
func = func.caller; 
} 
return null; 
} 
})(jQuery);

再次感谢"wind"。感谢 jww测试。(已兼容ie7,8,firefox3.5,chrome4)
Javascript 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
浅析node.js的模块加载机制
May 25 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 #Javascript
文本框的字数限制功能jquery插件
Nov 24 #Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 #Javascript
jquery ajax提交表单数据的两种方式
Nov 24 #Javascript
js loading加载效果实现代码
Nov 24 #Javascript
jquery.ui.draggable中文文档
Nov 24 #Javascript
JS 实现双色表格实现代码
Nov 24 #Javascript
You might like
DedeCms模板安装/制作概述
2007/03/11 PHP
PHP XML数据解析代码
2010/05/26 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
python自动安装pip
2014/04/24 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
python对XML文件的操作实现代码
2020/03/27 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
介绍一下游标
2012/01/10 面试题
计算机多媒体专业自荐信
2014/07/04 职场文书
三国演义读书笔记
2015/06/25 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
python实现三次密码验证的示例
2021/04/29 Python
浅析NIO系列之TCP
2021/06/15 Java/Android
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers