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

Javascript
javascript实现的鼠标悬停时动态翻滚的导航条
通过隐藏option实现select的联动效果
jquery 输入框数字限制插件
文字来回上下移动或跳动的代码
JS旋转的彩色文字轮转特效
不一样的文字闪烁 轮番闪烁
Javascript 解疑
jQuery 白痴级入门教程
Jquery在IE7下无法使用 $.ajax解决方法
javascript 日期常用的方法
ASP中进行HTML数据及JS数据编码函数
JS 中document.URL 和 windows.location.href 的区别
跨域表单提交状态的变相判断代码
JS解析XML的实现代码
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Javascript 定时器调用传递参数的方法
把html页面的部分内容保存成新的html文件的jquery代码
XHTML下,JS浮动代码失效的问题
两个select之间option的互相添加操作(jquery实现)
Jquery 获取表单text,areatext,radio,checkbox,select值的代码

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 157 ::
收藏到网摘: 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)