自动将 jQuery UI 对话框的大小调整为 ajax 加载的内容的宽度

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

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

我只想将对话框的大小调整为加载内容的宽度。现在，宽度仅保持在 300px（默认值），并且我得到一个水平滚动条。

据我所知，“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({
        autoOpen: false,
        resizable: false,
        modal: true,
        width:'auto'
});

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

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

唯一的问题是它使宽度偏离中心，但我发现这个支持票 http://dev.jqueryui.com/ticket/4053他们提供了一种解决方法，将dialog('open')setTimeout 中的语句来解决问题。

这是我的 head 标签的内容：

<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>

我从以下位置下载了 Jquery UI 的 js 和 csshttp://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip。 和身体：

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