为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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 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
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
Python素数检测的方法
2015/05/11 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
python中的unittest框架实例详解
2021/02/05 Python
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
高中的自我鉴定
2013/12/16 职场文书
初婚未育证明
2014/01/15 职场文书
教师个人学习总结
2015/02/11 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
七年级英语教学反思
2016/02/15 职场文书
初三数学教学反思
2016/02/17 职场文书
人民币使用说明书
2019/04/17 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
手残删除python之后的补救方法
2021/06/26 Python