Полноэкранный режим в jQuery-UI Dialog : Расширение базового функционала или Кодинг по методу напильника

jQuery-UI Dialog очень удобен в использовании, хорошо отлажен и приятно выглядит. И я уже упоминал о том, что использую его для создания оконного интерфейса в web-приложениях.

Как и раньше, в очередных доработках проекта Recaller мне потребовался нестандартный функционал, а именно разворачивание диалога на всю ширину экрана.

В моем случае потребовалось не просто развернуть диалог на всю ширину экрана, но и следить за изменением его размера, как-то например resize окна вручную, полноэкранный режим или добавление/убирание панелей браузера, цепляющих собой размеры viewport'а.

 

var dialog_params = {
        modal: true,
        draggable: false,
        open: function(event,ui)
        {
            
            $("body").css("overflow","hidden"); // лишаем "тело" прокрутки
            var dialog = $(this);
            $(window).resize(function() { // реагируем на изменение размера
                dialog.dialog({
                    width:window.innerWidth,
                    height:window.innerHeight
                });
              });
        },
        beforeClose: function()
        {
            $("body").css("overflow",""); // возвращаем прокрутку на место
        }
       
    }
    
    $(".new_dialog").dialog(dialog_params);
    $(".new_dialog").dialog("open");

 

Все просто, ничего сверхъестественного.

PS: CTAPbIu_MABP в своем блоге предлагал несколько другое, более красивое, но не совсем подходящее для моего случая решение — дополнительная кнопка "На весь экран" в диалоге.

Полезно(1)Бесполезно(0)
Комментарии закрыты.