为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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 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设计模式 Command(命令模式)
2011/06/26 PHP
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
javascript基本算法汇总
2016/03/09 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python 中Pickle库的使用详解
2018/02/24 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
机械绘图员岗位职责
2013/11/19 职场文书
班组长的岗位职责
2013/12/09 职场文书
《雷雨》教学反思
2014/02/20 职场文书
施工协议书范本
2014/04/22 职场文书
环保建议书200字
2014/05/14 职场文书
新学期开学演讲稿
2014/05/24 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
企业财务管理制度范本
2015/08/04 职场文书
改进工作作风心得体会
2016/01/23 职场文书
银行工作心得体会范文
2016/01/23 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android