为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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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异常处理使用示例
2014/02/25 PHP
如何实现JS函数的重载
2006/09/22 Javascript
拖动一个HTML元素
2006/12/22 Javascript
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
js防抖和节流的深入讲解
2018/12/06 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
Python正则表达式的使用范例详解
2014/08/08 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python基础之入门必看操作
2017/07/26 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
招聘单位介绍信
2014/01/14 职场文书
校外活动方案
2014/08/28 职场文书
总结会主持词
2015/07/02 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
JavaScript实现班级抽签小程序
2021/05/19 Javascript