5

親ダイアログの 100% 幅にしたい div があります。

#content {
    width: 100%;
    color:white;
    background: red;
}

ダイアログのサイズを手動で変更する場合はこのプロパティが必要ですが、手動でサイズを変更した後、ダイアログで を使用するanimate()と、古いサイズの幅が維持されます。

同じことが身長にも当てはまります。

HEREは、問題をよりよく説明する優れた jsFiddle です。

divの比率を維持するにはどうすればよいですか?

縦横比を維持しながら、jQuery は幅と高さ (手動でサイズ変更した場合) をどのように更新しますか?

編集：

何があっても、灰色の背景がダイアログ全体を埋めるようにしたかったのです。これを示す私の更新されたjsfiddleは次のとおりです。http://jsfiddle.net/Esh5h/1/

編集2：

私はそれを達成するための機能的だが非常に醜い方法を見つけました: JSFIDDLE

トリックは、ダイアログとその両方のサイズを変更することです.children(".ui-dialog-content")

編集3：

jQuery がサイズ変更に使用するのとまったく同じ関数を複製することはできませんか?

4

4 に答える 4

5

これをもう一度見て、要素を調べると、何が起こっているのかが明確になりました。

ダイアログのサイズを手動で変更するとすぐに、jQuery は次のstyleように固定値の属性を挿入します。

<div id="dialog" style="width: 376px; min-height: 99px; height: 282px;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
</div>

次に、アニメーション化すると、スタイルが意図した結果に干渉します。

styleアニメートする前に属性を削除すると、次のように機能しているようです。

$("#content").click(function () {
    $("#dialog").attr("style", "").dialog("widget").animate({
        width: $(document).width() -100,
        height: $(document).height() -100,
        left: 0,
        top: 0
    }, 150);
});

デモ- 移動leftしtopて一番下へ

編集

そのstyle属性はあなたに問題を与え続けます。それを削除した後、再度手動でサイズを変更すると、それらが再び注入され、期待される結果が台無しになります。

これを回避するために私が見つけた唯一の方法は、サイズ変更時にそれらをremivngし続けることです:

$("#dialog").on("dialogresize", function(){
    $(this).attr("style", "");
});

編集

何があっても、灰色の背景がダイアログ全体を埋めるようにしたかったのです。

これは、CSS セレクターの問題のようです。

これを変える：

.ui-dialog .ui-dialog-content {
    background : #cacaca;
}

これに：

.ui-dialog {
    background : #cacaca;
}

さらに、挿入されたスタイル属性が意図したスタイルを台無しにするという問題がまだあり、上記のコードを使用してサイズ変更時とアニメーション化時にスタイル属性を削除すると、それが修正されます。

デモ- 灰色の背景塗りつぶしダイアログと注入されたスタイル属性が常に削除されました

デモ- 上記と同じですが、empty-container要素

于 2013-03-16T23:16:16.847 に答える
0

ダイアログの移動とサイズ変更以外の目的を達成しようとしているのでない限り、クリックイベントでダイアログを再初期化する必要はないと思います。jQuery UIが元のdivをいくつかの新しいdivにラップする方法に注目してください。そのため、最も外側の要素を取得しています。Javascriptで次のようなことを試してください。

$("#dialog").dialog();

$("#content").click(function () {

    $(".ui-dialog").animate({
        left: 0,
        top: 0,
        width: $(document).width() -100,
        height: $(document).height() -100
    }, 150);

});
于 2013-03-16T23:43:12.990 に答える
0

animate({complete:function()})が解決策です。このjsfiddleは現在機能しています。

理由はわかりませんが、2回目のクリックでは正しく機能しますが、最初のクリックでは機能しません。この例はsetTimeout()動作します (少し遅れます)。

于 2013-03-17T00:14:38.110 に答える
0

animate 関数にコールバックを追加できます。

$("#content").click(function () {
    $("#dialog").dialog("widget").animate({
        width: $(document).width() -100,
        height: $(document).height() -100,
        left: 0,
        top: 0
    }, 150, function() { 
        $("#dialog").width($('.ui-dialog').width()); 
    });
});

JsFiddle デモ

于 2013-03-17T00:24:19.550 に答える