为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 相关文章推荐
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
python脚本实现验证码识别
2018/06/07 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Python如何根据时间序列数据作图
2020/05/12 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
公司新员工的演讲稿注意事项
2014/01/01 职场文书
文秘自荐信
2014/06/28 职场文书