当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能

Javascript
web开发设计师比较费解的JavaScript
jQuery教程:整理的几个常见的初学者问题
免费资源:7个效果非常棒的jQuery 3D效果插件
JavaScript教程:编写匿名函数的几种方法
jQuery教程:jQuery的核心
jQuery教程:jQuery核心方法的使用
webjx收集45个jQuery导航插件和教程
30个气泡悬浮框(Tooltip)的jQuery插件
Jetpack扩展案例:Gmail邮件提醒功能
非常出色的jQuery运动特效可以和Flash媲美
ImagesLazyLoad 图片延迟加载效果
收集国外的14个图片放大编辑的jQuery插件
修改和创建DOM节点两种方式的4种优化方案
jQuery.Switchable整合插件用途介绍
提高Textarea操作性能优秀的jQuery插件
WEBJX收集12个非常有创意的JavaScript小游戏
Javascript教程:关于深入了解JS的几个问题

Javascript 中的 为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 188 ::
收藏到网摘: n/a

在使用jquery.ui.dialog的过程中,发现position参数有些问题,无法通过position: [PosX, PosY]动态传递位置参数。下面是官方demo 代码
复制代码 代码如下:

$("#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. [email protected]");
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)