为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的事件绑定的一些思考(补充)
Apr 20 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
JS 数组随机洗牌的实例代码
Sep 12 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
用jQuery实现抽奖程序
Apr 12 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小教程之实现双向链表
2014/06/12 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
JavaScript中的闭包
2016/02/24 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
js尾调用优化的实现
2019/05/23 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
详解Python装饰器由浅入深
2016/12/09 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
秋季运动会稿件
2014/01/30 职场文书
《自选商场》教学反思
2014/02/14 职场文书
工程售后服务承诺书
2014/05/21 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
小学校长汇报材料
2014/08/20 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
民间个人借款协议书
2014/09/30 职场文书
建议书范文
2015/02/05 职场文书
入党积极分子个人总结
2015/03/02 职场文书
师范生见习总结范文
2015/06/23 职场文书