响应jQuery UI对话框（和一个修复maxWidth bug） [英] Responsive jQuery UI Dialog ( and a fix for maxWidth bug )

问题描述

许多网站利用jQuery UI，有一些主要的缺点必须克服，因为jQuery UI不支持响应式设计，并且使用 maxWidth 时存在长期的错误与 width：'auto'结合。

所以问题仍然存在，如何使jQuery UI Dialog响应？

解决方案

下面是我如何实现一个响应式jQuery UI对话框。

为此，我添加了一个新的选项到配置 - fluid：true ，这说明使对话框响应。

然后，我抓住调整大小和对话框打开事件，即时更改对话框的最大宽度，并重新定位对话框。

您可以在这里查看它的操作： http://codepen.io/jasonday/pen/amlqz

请查看并发布任何修改或改进。

  // Demo：http://codepen.io/jasonday/pen/amlqz 
 // [e-mail] 
 
 $（＃content）。dialog（{
 width：'auto'，// overcomes width：'auto'and maxWidth bug 
 maxWidth：600，
 height：'auto'，
 modal：true，
 ：true，// new option 
 resizable：false 
}）; 
 
 
 // on window resize run function 
 $（window）.resize（function（）{
 fluidDialog（）; 
} 
 
 //如果在小于对话框宽度的视口中打开，则捕获对话框
 $（document）.on（dialogopen，.ui-dialog，function（event，ui） {
 fluidDialog（）; 
}）; 
 
 function fluidDialog（）{
 var $ visible = $（。ui-dialog：visible）; 
 //每个打开的对话框
 $ visible.each（function（）{
 var $ this = $（this）; 
 var dialog = $ this.find -dialog-content）。data（ui-dialog）; 
 //如果fluid option == true 
 if（dialog.options.fluid）{
 var wWidth = $ window.width（）; 
 //根据对话框宽度检查窗口宽度
 if（wWidth<（parseInt（dialog.options.maxWidth）+ 50））{
 //保持对话框从填充整个屏幕
 $ this.css（max-width，90％）; 
} else {
 // fix maxWidth bug 
 $ this.css max-width，dialog.options.maxWidth +px）; 
} 
 //重新定位对话框
 dialog.option（position，dialog.options.position）; 
} 
}）; 
 
} 
  

EDIT

更新方法：
https://github.com/ jasonday / jQuery-UI-Dialog-extended

上面的存储库还包括以下选项：

• 点击对话框外关闭


• 隐藏标题栏


• 隐藏关闭按钮


• 回应（如上所述）


• 缩放宽度&响应的高度（例如：窗口宽度的80％）

With many sites leveraging jQuery UI, there are some major shortcomings that have to be overcome because jQuery UI does not support responsive design and there's a longstanding bug when maxWidth is used in conjunction with width:'auto'.

So the question remains, how to make jQuery UI Dialog responsive?

解决方案

Below is how I achieved a responsive jQuery UI Dialog.

To do this, I added a new option to the config - fluid: true, which says to make the dialog responsive.

I then catch the resize and dialog open events, to change the max-width of the dialog on the fly, and reposition the dialog.

You can see it in action here: http://codepen.io/jasonday/pen/amlqz

Please review and post any edits or improvements.

// Demo: http://codepen.io/jasonday/pen/amlqz
// [e-mail]

$("#content").dialog({
    width: 'auto', // overcomes width:'auto' and maxWidth bug
    maxWidth: 600,
    height: 'auto',
    modal: true,
    fluid: true, //new option
    resizable: false
});


// on window resize run function
$(window).resize(function () {
    fluidDialog();
});

// catch dialog if opened within a viewport smaller than the dialog width
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
    fluidDialog();
});

function fluidDialog() {
    var $visible = $(".ui-dialog:visible");
    // each open dialog
    $visible.each(function () {
        var $this = $(this);
        var dialog = $this.find(".ui-dialog-content").data("ui-dialog");
        // if fluid option == true
        if (dialog.options.fluid) {
            var wWidth = $(window).width();
            // check window width against dialog width
            if (wWidth < (parseInt(dialog.options.maxWidth) + 50))  {
                // keep dialog from filling entire screen
                $this.css("max-width", "90%");
            } else {
                // fix maxWidth bug
                $this.css("max-width", dialog.options.maxWidth + "px");
            }
            //reposition dialog
            dialog.option("position", dialog.options.position);
        }
    });

}

EDIT

Updated approach: https://github.com/jasonday/jQuery-UI-Dialog-extended

The repository above also includes options for:

• Click outside of dialog to close
• Hide title bar
• hide close button
• responsive (to address above)
• scale width & height for responsive (ex: 80% of window width)

这篇关于响应jQuery UI对话框（和一个修复maxWidth bug）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！