学步园

在使用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. 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）