响应式 jQuery UI 对话框(以及对 maxWidth 错误的修复) [英] Responsive jQuery UI Dialog ( and a fix for maxWidth bug )

问题描述

由于许多站点都使用 jQuery UI，因此存在一些必须克服的主要缺点，因为 jQuery UI 不支持响应式设计，并且当 maxWidth 与 结合使用时存在一个长期存在的错误宽度:'自动'.

那么问题仍然存在，如何使 jQuery UI Dialog 具有响应性?

解决方案

以下是我如何实现响应式 jQuery UI 对话框.

为此，我在配置中添加了一个新选项 - fluid: true，它表示使对话框具有响应性.

然后我捕获调整大小和对话框打开事件，以动态更改对话框的最大宽度，并重新定位对话框.

你可以在这里看到它的实际效果:http://codepen.io/jasonday/pen/amlqz>

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

//演示:http://codepen.io/jasonday/pen/amlqz//[e-mail]$("#content").dialog({width: 'auto',//克服了 width:'auto' 和 maxWidth 的错误最大宽度:600，高度:'自动'，模态:真，流体:真，//新选项可调整大小:假});//在窗口调整大小运行函数$(window).resize(function () {流体对话框()；});//如果在小于对话框宽度的视口内打开，则捕获对话框$(document).on("dialogopen", ".ui-dialog", function (event, ui) {流体对话框()；});函数流体对话框(){var $visible = $(".ui-dialog:visible");//每个打开的对话框$visible.each(function () {var $this = $(this);var dialog = $this.find(".ui-dialog-content").data("ui-dialog");//如果流体选项 == 真如果(对话框.选项.流体){var wWidth = $(window).width();//根据对话框宽度检查窗口宽度if (wWidth <(parseInt(dialog.options.maxWidth) + 50)) {//防止对话框填满整个屏幕$this.css("最大宽度", "90%");} 别的 {//修复最大宽度错误$this.css("max-width", dialog.options.maxWidth + "px");}//重新定位对话框dialog.option("位置", dialog.options.position);}});}

编辑

更新方法: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 错误的修复)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！