jQueryUI - Диалог изменения размера после загрузки AJAX - PullRequest
Новая
       6

jQueryUI - Диалог изменения размера после загрузки AJAX

4 голосов
/ 14 января 2011

Я пытаюсь написать быстрый плагин, который будет загружать некоторый контент AJAX в диалоговое окно jQuery UI и соответственно изменять его размер и центрировать диалог.Вот суть того, что он делает: 

$(mySelector).html('Loading...').load(options.url, function() {

    element = $(mySelector);

    element.dialog('option', 'height', element.height() + 50);
    element.dialog('option', 'width', element.width());
    element.dialog('option', 'position', 'center');

});

Высота, кажется, в порядке (добавляя некоторые для заполнения диалогового окна добавляет), но ширина ВСЕГДА 274, несмотря ни на что.Я думаю, что сам диалог устанавливает ограничения по размеру.Как мне установить его равным естественной ширине загруженного контента?

Редактировать / добавить: Возвращается размер модального по умолчанию.Поскольку даже если он содержит контент, который шире (скажем, изображение размером 500 пикселей), родительский контейнер (mySelector) может быть не таким широким (по крайней мере, в FF), поэтому он всегда был по умолчанию (300 - padding = 274).Есть ли способ автоматически определить, какая ширина возвращаемого содержимого была бы минимальной без прокрутки?)

Ответы [ 3 ]

9 голосов
/ 14 января 2011

Раньше у меня была такая же проблема.Если я помню, вам нужно сначала загрузить диалог, а затем загрузить содержимое в нем.Таким образом, диалог автоматически изменит свой размер (с шириной = авто).

Более менее так (проверено): 

var $dialog; //Must be at the global scope
function dialog(url) {
    $dialog.dialog("option", "width", "auto");
    $dialog.dialog("option", "height", "auto");
    $.get(url,{},function(html) {
        $dialog.html(html);
        $dialog.dialog("open");
    });
}

$(function() {
    //Initialize (without showing it)
    var $dialog = $('<div id="dialog" title=""></div>').dialog({
        autoOpen: false,
        modal: true
    });
});

Тогда вы можете сделать это: 

dialog(someURL);
5 голосов
/ 14 января 2011

Они должны были снова вызвать open после загрузки контента, а затем заново отцентрировать его. Это заставит диалог сделать его волшебным, изменить его размер и перецентрировать себя. Я выложу плагин здесь, как только почисту его.

1 голос
/ 09 апреля 2013

Немного поздно, но это мое рабочее решение: 

$("#dialog" ).dialog({
        autoOpen: false,
        modal: true,
        width: 'auto',
        height: 'auto',

        create: function(){
                var content = '<h1>This is some Content</h1>';
                $('.content', this).replaceWith(content);

        buttons: {
            Ok: function(){
                    $(this).dialog("close");
            }
        }
    });

Хитрость заключалась в том, чтобы вставить содержимое диалога в обработчик 'create'.

...