为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.jstree 增加节点的双击事件代码
Jul 27 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
javascript数组排序汇总
Jul 07 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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读取flv文件的播放时间长度
2009/09/03 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
Smarty模板语法详解
2019/07/20 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
js left,right,mid函数
2008/06/10 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
js对象基础实例分析
2015/01/13 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
python实现黑客字幕雨效果
2018/06/21 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
《长征》教学反思
2014/04/27 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
参观邀请函范文
2015/02/02 职场文书
办公室岗位职责
2015/02/04 职场文书
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS