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

Question

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

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

这个对话框是居中开始的，一旦用户开始点击链接，我需要将对话框移到用户的位置，并突出显示（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 从对话框的当前顶部值开始，并减少到窗口的滚动顶部（浏览器视口的可见顶部）。
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。 Position 的选项之一是“使用”功能。如果定义了“使用”，它会触发该函数并传入 {left:xxx, top:xxx} 的对象。如果没有定义，它只会更新 ui-dialog 上的 css。这是代码的sn-p：

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

您可以覆盖 Position 默认值上的 'using' 属性，但由于我仅用于对话框，因此我在对话框原型上覆盖了它：

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

我希望这会有所帮助！

谢谢， -赛姆