为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 相关文章推荐
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 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
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
5个javascript的数字格式化函数分享
2011/12/07 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
node.js超时timeout详解
2014/11/26 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Python二元赋值实用技巧解析
2019/10/25 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
单位成立周年感言
2014/01/26 职场文书
晨会主持词
2014/03/17 职场文书
天网工程实施方案
2014/03/26 职场文书
2014年会策划方案
2014/05/11 职场文书
绿色环保口号
2014/06/12 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
2014年科研工作总结
2014/12/03 职场文书
满月酒邀请函
2015/01/30 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS