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

Question

我在查找具体信息和示例方面遇到了很多麻烦.我的应用程序中有许多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.看起来这应该是非常简单的事情.

编辑:我为此实施了一个kludgy解决方法,但我仍在寻找更好的解决方案.

Answer 1

我刚刚使用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设置可以解决这个问题吗？

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

这是我的头标记的内容:

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

我从http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip下载了Jquery UI的js和css .和身体:

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

Answer 2

有同样的问题,并且由于你提到真正的问题与CSS有关,我发现了这个问题:

拥有position:relative而不是position:absolute在你的.ui-dialogCSS规则,使对话和width:'auto'行为怪异.

.ui-dialog { position: absolute;}