为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 相关文章推荐
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
详解Vue This$Store总结
Dec 17 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
JavaScript前端面试组合函数
Jun 21 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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/06/20 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php 购物车完整实现代码
2014/06/05 PHP
js获取单选按钮的数据
2006/11/27 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
js实现右键菜单功能
2016/11/28 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
Python切换pip安装源的方法详解
2016/11/18 Python
Mac 上切换Python多版本
2017/06/17 Python
Python实现登录接口的示例代码
2017/07/21 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
公司离职证明范本
2014/01/13 职场文书
C++程序员求职信范文
2014/04/14 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
会计出纳岗位职责
2015/03/31 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
送给客户微信问候语!
2019/07/04 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS