为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 硬盘序列号+其它硬件信息
Dec 23 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
PHP数据库处理封装类实例
2016/12/24 PHP
php修改数组键名的方法示例
2017/04/15 PHP
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
删除节点的jquery代码
2014/01/13 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
python中requests小技巧
2017/05/10 Python
python生成带有表格的图片实例
2019/02/03 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
Python Map 函数的使用
2020/08/28 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
小学生考试获奖感言
2014/01/30 职场文书
学校个人对照检查材料
2014/08/26 职场文书
高三英语教学计划
2015/01/23 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python