jQuery Dialog - 动画对话框从中心移动到右上角

Question

我有一个带有验证插件设置的表单。当表单提交并出现错误时，我将在对话框（非模式）中显示错误字段。

表单可能会变得非常长非常快（业务需求不断添加字段），我将对话框中的错误字段设置为可单击，以将窗口滚动到表单中的字段并突出显示这些字段。此时该对话框并未消失。

该对话框一开始就居中，一旦用户开始单击链接，我需要将对话框移出用户的视线并突出显示（jQuery 效果）下面的字段。

为此，我想出了以下代码，并且该对话框似乎动画到顶部而不是右侧。当我将“右”更改为“左”时，效果很好。

下面是代码和要使用的 jsbin - http://jsbin.com/avigi3/4/

$('a.field').click(function(){
    $(this).closest('.ui-dialog').animate( {
        right : '0', /*left:'0' works fine here*/
        top : $(window).scrollTop()
    }, 'slow');
});

我调试了 jQuery.animate 代码，以下是我的注释：

1. jQuery.animate() 从属性的当前值开始，并逐渐动画到传入的目标值。例如：在调用中，top 以任何当前顶部对话框的值是 并减少到窗口的scrollTop（即浏览器视口的可见顶部）。
2. 现在，问题就在这里。即使对话框是居中对齐的，它的“right”属性也不存在，因为 jQuery-ui 使用“left”属性来居中（绝对位置）对话框。由于“右”不存在，“右”的动画序列似乎不起作用。

有人遇到过这个问题吗？有什么方法可以重置对话框的“正确”位置，使其具有“某些”值吗？或者我可以配置 jQuery 对话框，以便在以编程方式更改位置而不是通过手动拖动来更改位置时显示动画。

谢谢，
-赛姆

Answer 1

试试这个

$('a.field').click(function(){
    dialog = $(this).closest('.ui-dialog')
    dialog.animate( {
        left: document.width - dialog.width(), // or you might want to use .outerWidth()
        top: $(window).scrollTop()
    }, 'slow');
});

Answer 2

对于未来的读者来说，Shrikant 的答案将是一个更快的修复，并且特定于调用，并且效果很好。只需更改宽度以使用 offsetWidth() 来考虑填充/边距。

我最终完成了 jQuery UI 代码并找到了一个通用的实现。这是针对 jquery-ui 1.8.10 的。

一旦通过计算 {left:xxx, top:xxx} 找出将对话框移动到哪里，jQuery-dialog 就会使用 Position 用于定位和重新定位 ui-dialog div 的实用程序。位置的选项之一是“使用”功能。如果定义了 'using'，它会触发该函数并传入 {left:xxx, top:xxx} 的对象。如果没有定义，它只会更新 ui-dialog 上的 css。这是代码片段：

line number 9977 in jquery-ui version 1.8.10:
            if ( 'using' in options ) {
                options.using.call( elem, props );
            } else {
                curElem.css( props );
            }

您可以覆盖位置默认值上的“using”属性，但由于我的用法仅适用于对话框，因此我在对话框原型上覆盖了它：

$.extend($.ui.dialog.prototype.options, {
    position : {
        using : function(props) {
            $(this).animate( {
                left : props.left,
                top : props.top
            }, 'slow');
        }
    }
});

我希望这会有所帮助！

谢谢，
-赛姆