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

问题描述

我有很多的麻烦找上这个特定的信息和示例。我有一些在我的应用程序jQuery UI的对话框连接到的div被加载。阿贾克斯（）调用。它们都使用相同的设置的呼叫：

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
 });

我只是想有对话框调整到被加载内容的宽度。眼下，宽度只停留在300像素（默认），我得到一个水平滚动条。

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.

我想不写一个单独的函数对每个对话，所以 .dialog（选项，宽度，500）是不是一个真正的的选择，因为每个对话框都将有不同的宽度。

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.

指定宽度：自动的对话框选项只是使对话采取浏览器窗口的宽度可达100％

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

我有什么选择？我使用jQuery 1.4.1使用jQuery UI 1.8rc1。看起来这应该是东西是很容易的。

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.

编辑：我已经实现了一个缺憾解决方法，但我还在寻找一个更好的解决方案。

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

推荐答案

我刚刚写了使用JQuery 1.4.1和UI 1.8rc1一个微小的示例应用程序。我所做的只是指定的构造函数：

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'
});

我知道你说，这使它占据浏览器窗口的宽度为100％，但它的工作原理甜在这里，在FF3.6，Chrome和IE8进行测试。

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.

我不是做AJAX调用，只需手动更改对话框的HTML，但不认为这会造成任何probs。难道其他一些CSS设置敲开了这一点？

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?

这个唯一的问题是，它使宽度偏离中心，但我发现这个支持票他们供应的地方放置对话框（公开）语句中的setTimeout来解决这个问题的一种解决方法。

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>

我下载的js和css的jQuery UI从<一个href="http://jquery-ui.google$c$c.com/files/jquery-ui-1.8rc1.zip">http://jquery-ui.google$c$c.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>

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