Диалоговое окно UI - Как не отображать диалог, пока содержимое не загружено? - PullRequest
Новая
       3

Диалоговое окно UI - Как не отображать диалог, пока содержимое не загружено?

3 голосов
/ 28 февраля 2011

Я экспериментировал с использованием диалогового окна UI для отображения существующей формы (страницы с формой и без макета). Я не уверен, правильно ли я это делаю, но, похоже, все работает хорошо, за исключением пары плохих поступков. Это поведение сейчас:

  1. Открывается диалоговое окно без содержимого (очень маленькое / пустое)
  2. Примерно через полсекунды содержимое загружается, и окно расширяется (выглядит плохо)
  3. Даже если ширина окна увеличивается при загрузке контента, строка заголовка не адаптируется к новой ширине и остается очень маленькой по ширине. Хотя если для свойства resizeable установлено значение «true», заголовок будет расширяться. Он просто не отвечает настройкой ширины, когда загружается содержимое из скрытого div.

Как можно не отображать диалоговое окно, пока содержимое не будет загружено в диалоговое окно, и как заставить заголовок диалогового окна настроить ширину сразу после завершения загрузки содержимого? 

<A HREF="javascript:newItem('foo')">CREATE NEW FOO ITEM<A>

<script type="text/javascript">
    newItem= function(type) {
      $("#form_load").load(
          '/items/new', {item_type: type}).dialog({
                modal:true,
                draggable: true,
                resizable: false,
                width:'auto',
                height:'auto',
                title: 'Some title',
                position: [150, 150]
          });
    };
</script>

Спасибо!

1 Ответ

3 голосов
/ 28 февраля 2011

Вы захотите вызвать диалоговое окно после загрузки контента.Вы можете сделать это с помощью метода обратного вызова $ .load. 

<script type="text/javascript">
    newItem = function(type) {
        $("#form_load").hide().load(
            '/items/new',
            {item_type: type},
            function (data) {
                $(this).dialog({
                    modal     : true,
                    draggable : true,
                    resizable : false,
                    width     : 'auto',
                    height    : 'auto',
                    title     : 'Some title',
                    position  : [100, 100]
                });
            }
        });            
    }
</script>

Вы также можете включить переключатель скрытия / показа, чтобы контейнер #form_load не отображался до тех пор, пока содержимое не будет загружено.

См. Документы jQuery $ .load здесь: http://api.jquery.com/load/

ОБНОВЛЕНИЕ: Добавлен .hide (), поэтому содержимое не отображается, пока не будет создано диалоговое окно.

...