为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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
javascript document.referrer 用法
Apr 30 Javascript
jQuery select控制插件
Aug 17 Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
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 pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
python计算一个序列的平均值的方法
2015/07/11 Python
python编码最佳实践之总结
2016/02/14 Python
python模块之time模块(实例讲解)
2017/09/13 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
详解Python多线程下的list
2020/07/03 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
申论倡议书范文
2014/05/13 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
接收函
2019/04/22 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python