自动将 jQuery UI 对话框的大小调整为 ajax 加载的内容的宽度 [英] Automatically resize jQuery UI dialog to the width of the content loaded by ajax

问题描述

我很难找到这方面的具体信息和示例.我的应用程序中有许多 jQuery UI 对话框附加到加载了 .ajax() 调用的 div.它们都使用相同的设置调用:

 $(".mydialog").dialog({自动打开:假，可调整大小:假，模态:真});

我只想将对话框的大小调整为加载的内容的宽度.现在，宽度只是保持在 300 像素(默认值)，我得到了一个水平滚动条.

据我所知，autoResize"不再是对话框的一个选项，当我指定它时什么也没有发生.

我试图不为每个对话框编写单独的函数，所以 .dialog("option", "width", "500") 并不是一个真正的选项，因为每个对话框都是会有不同的宽度.

为对话框选项指定 width: 'auto' 只会使对话框占据浏览器窗口宽度的 100%.

我有哪些选择?我使用 jQuery 1.4.1 和 jQuery UI 1.8rc1.看起来这应该是一件很容易的事情.

我已经为此实施了一个笨拙的解决方法，但我仍在寻找更好的解决方案.

解决方案

我刚刚使用 JQuery 1.4.1 和 UI 1.8rc1 编写了一个小型示例应用程序.我所做的只是将构造函数指定为:

var theDialog = $(".mydialog").dialog({自动打开:假，可调整大小:假，模态:真，宽度:'自动'});

我知道你说过这会使其占据浏览器窗口的 100% 宽度，但它在这里工作得很好，在 FF3.6、Chrome 和 IE8 中进行了测试.

我没有进行 AJAX 调用，只是手动更改对话框的 HTML，但不认为这会导致任何问题.其他一些 css 设置可以解决这个问题吗?

唯一的问题是它使宽度偏离中心，但我发现了这个支持票 他们提供了一种解决方法，将 dialog('open') 语句放在 setTimeout 中以解决问题.

这是我的 head 标签的内容:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></脚本><script type="text/javascript" src="jquery-ui.min.js"></script><link href="jquery-ui.css" rel="stylesheet" type="text/css"/><script type="text/javascript">$(函数(){var theDialog = $(".mydialog").dialog({自动打开:假，可调整大小:假，模态:真，宽度:'自动'});$('#one').click(function(){theDialog.html('一些随机文本').dialog('open');});$('#two').click(function(){theDialog.html('<ul><li>苹果</li><li>橙</li><li>香蕉</li><li>草莓</li><li>长文本字符串以查看宽度是否发生变化').dialog('open');});$('#three').click(function(){//这只是在偏心很明显的地方调用所以使用setTimeouttheDialog.html('<img src="./random.gif" width="500px" height="500px"/>');setTimeout(function(){ theDialog.dialog('open') }, 100);;});});

我从 http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip.和身体:

<a href='#' id='one'>test1</a><a href='#' id='two'>test2</a><a href='#' id='three'>test3</a>

I'm having a lot of trouble finding specific information and examples on this. I've got a number of jQuery UI dialogs in my application attached to divs that are loaded with .ajax() calls. They all use the same setup call:

 $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true
 });

I just want to have the dialog resize to the width of the content that gets loaded. Right now, the width just stays at 300px (the default) and I get a horizontal scrollbar.

As far as I can tell, "autoResize" is no longer an option for dialogs, and nothing happens when I specify it.

I'm trying to not write a separate function for each dialog, so .dialog("option", "width", "500") is not really an option, as each dialog is going to have a different width.

Specifying width: 'auto' for the dialog options just makes the dialogs take up 100% of the width of the browser window.

What are my options? I'm using jQuery 1.4.1 with jQuery UI 1.8rc1. It seems like this should be something that is really easy.

EDIT: I've implemented a kludgy workaround for this, but I'm still looking for a better solution.

解决方案

I've just wrote a tiny sample app using JQuery 1.4.1 and UI 1.8rc1. All I did was specify the constructor as:

var theDialog = $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width:'auto'
});

I know you said that this makes it take up 100% width of the browser window but it works sweet here, tested in FF3.6, Chrome and IE8.

I'm not making AJAX calls, just manually changing the HTML of the dialog but don't think that will cause any probs. Could some other css setting be knocking this out?

The only problem with this is that it makes the width off-centre but I found this support ticket where they supply a workaround of placing the dialog('open') statement in a setTimeout to fix the problem.

Here is the contents of my head tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function(){
        var theDialog = $(".mydialog").dialog({
            autoOpen: false,
            resizable: false,
            modal: true,
            width: 'auto'
        });

        $('#one').click(function(){
            theDialog.html('some random text').dialog('open');
        });

        $('#two').click(function(){
            theDialog.html('<ul><li>Apple</li><li>Orange</li><li>Banana</li><li>Strawberry</li><li>long text string to see if width changes</li></ul>').dialog('open');
        });

        $('#three').click(function(){
            //this is only call where off-centre is noticeable so use setTimeout
            theDialog.html('<img src="./random.gif" width="500px" height="500px" />');
            setTimeout(function(){ theDialog.dialog('open') }, 100);;
        });
     });
</script>

I downloaded the js and css for Jquery UI from http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip. and the body:

<div class='mydialog'></div>
<a href='#' id='one'>test1</a>
<a href='#' id='two'>test2</a>
<a href='#' id='three'>test3</a>

这篇关于自动将 jQuery UI 对话框的大小调整为 ajax 加载的内容的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！