7

ダイアログを表示しているとき、ダイアログの高さは100、幅は100のようです

$("#dialog").dialog({
    autoOpen: true,
    height: 100,
    width: 100,
    modal: false,
    draggable: false,
    resizable: false,
});

jquery ajaxには成功オプションがあり、そこからデータがロードされていると判断できるため、バックグラウンドでデータをロードし、データが完全にロードされると、それらのデータがダイアログに表示されます。高さ300、幅300などのより多くのスペースが必要なダイアログに表示したいデータがあるとします。その大きなデータをダイアログに入れると、ダイアログは自動的にサイズ変更されますか？

そうでない場合、プログラムでダイアログの高さと幅を増やすにはどうすればよいですか 徐々に高さと幅が増加し、データがフェードイン効果でダイアログに表示されます....それを達成する方法. いくつかのコードで助けが必要です。ありがとう

4

2 に答える 2

5

まず、非表示のダイアログ要素の高さを計算します。幅を 300px に設定する前に、高さを設定せずに class を追加しui-widgetます。

HTML:

<div id="dialog" class="ui-widget">...

CSS:

#dialog {
    display: none;
    width: 300px;
}

JS (16px はダイアログのパディングです):

var iHeight = $('#dialog').height() + 16;

ダイアログが作成された後、ダイアログ ラッパーの新しい幅を設定し、現在の高さが計算値より低い場合はアニメーションを開始します。

JS:

if ($("#dialog").height() < iHeight) {
    $("#dialog").parent().width(300 + 50);
    $("#dialog").animate({ height: iHeight, width: '300px'}, 500);
}

私のjsfiddleも参照してください。

===更新===

私の更新されたjsfiddle。

于 2011-10-26T18:45:21.090 に答える
4

高さ/幅がわかっているか、何らかの方法で計算できる場合は、http://api.jquery.com/animate/を使用できます

$('#yourDiv').animate({height: '400px', width: '200px'});
于 2011-10-26T18:06:43.880 に答える