为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 相关文章推荐
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
vue实现在线学生录入系统
May 30 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
PHP 安全检测代码片段(分享)
2013/07/05 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
当当网软件测试笔试题
2015/11/24 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
车间统计员岗位职责
2014/01/05 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
食品销售计划书
2014/04/26 职场文书
人事经理岗位职责
2014/04/28 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
环保建议书作文400字
2015/09/14 职场文书
如何写好竞聘报告
2019/04/03 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
Django中session进行权限管理的使用
2021/07/09 Python