Клонировать диалоговые кнопки jqueryui вверху диалога

Question

У меня высокое диалоговое окно с кнопками Сохранить и Отменить, которые выполняют некоторые действия с данными в диалоговом окне, а также закрывают диалоговое окно.

Можно ли дублировать эти кнопки, чтобы они отображались как в верхней части диалога, так и в нижней части?

Мне удалось сделать это вручную с неожиданными результатами. Можно ли клонировать точные кнопки, которые создаются в диалоге инициализации? Я знаю, что кнопки не имеют идентификаторов, хотя ...

Спасибо!

Answer 1

так просто, как этот

добавить следующее к CSS около строки 445 в jquery ui css

.ui-dialog .ui-dialog-buttonpane
{
position: absolute; top: 35px; width: 98%;
}

Answer 2

Виджет диалога не обеспечивает такое поведение из коробки. Вы можете взломать поведение самостоятельно, но оно может сломаться при обновлении до новых выпусков jquery-ui. Вот как бы я это сделал:

    $('#my-dialog').dialog({
        buttons: {
            'hello world': function() { alert('hello world'); },
            'good bye': function() { alert('goodbye'); }
        },
        open: function(event, ui) {
            // for whatever reason, the dialog isn't passed into us as a paramter, discover it.
            var dialog = $(this).closest('.ui-dialog');

            // create a copy of all the buttons and mark it as a clone (for later)
            var originalButtons = $('.ui-dialog-buttonpane', dialog)
            var clonedButtons = originalButtons.clone().addClass('clone');
            $('.ui-dialog-titlebar', dialog).after(clonedButtons);

            // cloning doesn't copy over event handlers, so we need to wire up
            // the click events manually.     
            $('button', clonedButtons).click(function() {
                var button = $(this);                    
                var buttonIndex = $('button', clonedButtons).index(button);
                $('button:eq(' + buttonIndex + ')', originalButtons).click();
            });
        }
    });

Answer 3

Да, вы можете сделать это. Точный селектор, используемый в скрипте jQuery, будет зависеть от HTML-элемента, используемого для отображения ваших кнопок, но для клонирования кнопок И их обработчики событий будут выглядеть примерно так:

$('.dialogClass button').clone(true);

Чтобы добавить их в какой-либо контейнер, расположенный в верхней части диалогового окна:

$('.dialogClass button').clone(true).appendTo('.topContainerClass');

Проверьте документы для клон .