为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 相关文章推荐
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
python访问sqlserver示例
2014/02/10 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Anaconda入门使用总结
2018/04/05 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
Python 实现向word(docx)中输出
2020/02/13 Python
python实现微信打飞机游戏
2020/03/24 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
python 动态绘制爱心的示例
2020/09/27 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
华为慧通面试题
2012/09/11 面试题
旅游个人求职信范文
2014/01/30 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
花田少年史观后感
2015/06/16 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技