Question

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

表单可以非常快速地完成（业务需求不断添加字段）并且我在对话框中使用errore'd字段可单击以将窗口滚动到from中的字段并突出显示字段。此时不会关闭该对话框。

这个对话框的中心位于开始时，一旦用户开始点击链接，我需要移出用户方式的对话框并突出显示（jQuery效果）下面的字段。

要做到这一点，我已经提出了以下代码，对话框似乎是动画到顶部但不是右边。当我将'right'改为'left'时，它可以正常工作。

下面是代码和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代码，这是我的笔记：

jQuery.animate（）'以'属性的当前值'开始'并逐渐动画到传入的目标值。例如，在调用中，top以对话框的当前最高值开始，并缩小为窗口的scrollTop（浏览器视口的可见顶部）。
现在，这就是问题所在。即使对话框是中心对齐的，它的'right'属性也不存在，因为jQuery-ui使用'left'属性来居中（绝对定位）对话框。由于'right'不存在，'right'的动画序列似乎不起作用。

有没有人面对这个问题？我有可能重置对话框的“正确”位置，以便它具有“某些”价值？或者我可以配置jQuery对话框，使其在以编程方式更改位置时动画，而不是通过拖动手动更改。

谢谢，
-Syam

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的一个选项是'使用'功能。如果定义了'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 );
            }

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

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

我希望这有帮助！

谢谢， -Syam

jQuery Dialog - 动画对话框，从中心向右上方移动

2 个答案: