为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延迟执行实现方法(setTimeout)
Dec 30 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
Python实现自动发送邮件功能
2021/03/02 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
实习老师离校感言
2014/02/03 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
党员岗位承诺书
2014/03/25 职场文书
新书发布会策划方案
2014/06/09 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
七年级语文教学反思
2016/03/03 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技