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

小编典典

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

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一起使用。看起来这应该很简单。

编辑：我已经为此实现了一个变通的解决方法，但我仍在寻找更好的解决方案。

阅读 229

2020-07-26

共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中的解决方法，以解决此问题。

这是我的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>

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

2020-07-26