jQuery Dialog - анимированный диалог для перемещения из центра в верхний правый угол - PullRequest
Новая
       5

jQuery Dialog - анимированный диалог для перемещения из центра в верхний правый угол

2 голосов
/ 11 апреля 2011

У меня есть форма с настройкой плагина проверки.Когда форма отправлена ​​и содержит ошибки, я показываю поля с ошибками в диалоговом окне (не модальном).

Форма может быть очень длинной и очень быстрой (бизнес-требования продолжают добавлять поля), и я сделалполя 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и вот мои заметки:

  1. jQuery.animate () «начинается» с текущего значения свойства и постепенно анимируется до значения назначения, как передано. Например, в вызове top начинается с любоготекущее верхнее значение диалогового окна равно и сводится к scrollTop окна (который является видимой вершиной окна просмотра браузера).
  2. Теперь здесь кроется проблема.Даже если диалог выровнен по центру, его свойство 'right' не существует, так как jQuery-ui использует свойство 'left', чтобы центрировать (абсолютно позиционировать) диалог.А поскольку «правильного» не существует, последовательность анимации для «правильного», похоже, не работает.

Кто-нибудь сталкивался с этой проблемой?В любом случае, я мог бы сбросить «правильную» позицию диалога, чтобы он имел «некоторое» значение?Или я могу настроить диалоговое окно jQuery таким образом, чтобы оно анимировалось, когда позиция изменялась программно, а не вручную путем перетаскивания.

Спасибо,
-Сям

Ответы [ 2 ]

5 голосов
/ 11 апреля 2011

Попробуйте это 

$('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');
});
4 голосов
/ 12 апреля 2011

Для будущих читателей ответ Шриканта будет более быстрым и специфичным для звонка, и он отлично работает. Просто измените ширину, чтобы использовать offsetWidth () для учета отступов / полей.

Я закончил следовать коду JQuery UI до конца и нашел общую реализацию. Это для jquery-ui 1.8.10.

Как только он выясняет, куда перемещать диалоговое окно, вычисляя {left: xxx, top: xxx}, jQuery-dialog использует утилиту Position для позиционирования и повторного позиционирования div пользовательского диалога. Одним из параметров для Позиции является функция «использование». Если определено «using», оно запускает эту функцию и передает объект {left: xxx, top: xxx}. Если он не определен, он просто обновляет CSS в UI-диалоге. Вот фрагмент кода: 

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

Вы можете переопределить свойство 'using' по умолчанию для Position, но так как я использую только для диалогов, я переписал его в прототипе диалога: 

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

Надеюсь, это поможет!

Спасибо, -Syam

...