我有一個顯示錶單的JQuery UI對話框彈出窗口。通過選擇表單上的某些選項,新選項將出現在表單中,導致其變長。這可能導致主頁面具有滾動條並且JQuery UI對話框具有滾動條的情況。這種雙滾動條的情況對用戶來說很難看而且令人困惑。使JQuery UI對話框自動增長或縮小以適應其內容
我怎樣才能使JQuery UI對話框增長(可能收縮),以始終適合其內容而不顯示滾動條?我寧願只在主頁面上顯示一個滾動條。
我有一個顯示錶單的JQuery UI對話框彈出窗口。通過選擇表單上的某些選項,新選項將出現在表單中,導致其變長。這可能導致主頁面具有滾動條並且JQuery UI對話框具有滾動條的情況。這種雙滾動條的情況對用戶來說很難看而且令人困惑。使JQuery UI對話框自動增長或縮小以適應其內容
我怎樣才能使JQuery UI對話框增長(可能收縮),以始終適合其內容而不顯示滾動條?我寧願只在主頁面上顯示一個滾動條。
更新:在jQuery UI 1.8,工作液(如第二條評論中提及)是使用:
width: 'auto'
使用自動調整:真正的選項。我將舉例說明:
<div id="whatup">
<div id="inside">Hi there.</div>
</div>
<script>
$('#whatup').dialog(
"resize", "auto"
);
$('#whatup').dialog();
setTimeout(function() {
$('#inside').append("Hello!<br>");
setTimeout(arguments.callee, 1000);
}, 1000);
</script>
這裏有一個工作示例: http://jsbin.com/ubowa
嗯..將不得不延長我的[FrameDialog](http://plugins.jquery.com/project/jquery-framedialog)..它本質上是一種創建用於對話框的iframed內容的方法..它不是完美的,但對於我需要的項目來說效果很好。 – Tracker1 2009-04-19 05:44:35
答案是創建對話框時,設置
autoResize:true
財產。爲了這個工作,你不能爲對話框設置任何高度。因此,如果您在其創建者方法或任何樣式中爲對話框設置固定的像素高度,autoResize屬性將不起作用。
奇妙:)但爲什麼jQuery沒有把它放在他們的文檔?!。無論如何謝謝你。 – 2010-10-12 18:08:41
小心,不能通過觸發器插件定位(在我的,關閉等) – Jeffz 2012-05-31 11:40:33
var w = $('#dialogText').text().length;
$("#dialog").dialog('option', 'width', (w * 10));
做了什麼,我需要它調整大小的對話框的寬度做。
自動支持高度。
寬度不是!
要做某種自動獲得您顯示的div的大小,然後設置窗口。
在C#代碼..
TheDiv.Style["width"] = "200px";
private void setWindowSize(int width, int height)
{
string widthScript = "$('.dialogDiv').dialog('option', 'width', " + width +");";
string heightScript = "$('.dialogDiv').dialog('option', 'height', " + height + ");";
ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
"scriptDOWINDOWSIZE",
"<script type='text/javascript'>"
+ widthScript
+ heightScript +
"</script>", false);
}
我用下面的屬性,它爲我工作得很好:
$('#selector').dialog({
minHeight: 'auto'
});
這工作與jQuery UI v1.10.3
$("selector").dialog({height:'auto', width:'auto'});
如果您需要它在IE7中工作,則不能使用undocumented, buggy, and unsupported{'width':'auto'}
選項。相反,以下內容添加到您的.dialog()
:
'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }
無論.scrollWidth
包括右側填充依賴於瀏覽器(Firefox Chrome的不同),這樣你就可以添加像素的主觀的「足夠好」的數.scrollWidth
,或用您自己的寬度計算功能替換它。
您可能希望在.dialog()
選項中包含width: 0
選項,因爲此方法不會減小寬度,只會增加寬度。
經測試,在IE7,IE8,IE9,IE10,IE11,火狐30,鉻35,和Opera 22的工作
我建議張貼代碼的樣本,就很難推薦一個解決方案,而看到對話框的結構。 – Diego 2009-04-16 14:22:15