2

以下のコードのような単純なダイアログで、ダイアログがドラッグされるたびに高さが縮小されます。ダイアログのサイズ変更可能= falseを設定すると、高さの値も変更されます。最後に、dragStop イベント ハンドラでダイアログの高さを再更新して修正しました。

同様の問題がここで報告されていることがわかりましたが、それはIEであり、著者は高さの値を設定しないことを提案しました.IMHOはすべてのユースケースに適しているわけではありません.

Chrome と jQuery UI 1.8.19 を使用しています

<p><a id="edit" href="#">Open Editor</a></p>
<div id="editor"></div>

$(document).ready(function ()
    {
        $("#edit").on("click", function ()
        {
                var $dialog = $("#editor")
                .dialog(
                {
                    title: "HTML Editor",
                    modal: true,
                    autoOpen: false,
                    width: 600,
                    height: 350,
                    minWidth: 300,
                    minHeight: 200,
                    closeOnEscape: true,
                    resizable: false,
                    open: function ()
                    {
                    },
                    buttons:
                    {
                        "Save": function ()
                        {
                            $(this).dialog("close");
                        },
                        "Cancel": function ()
                        {
                            $(this).dialog("close");
                        }
                    },
                    dragStop: function (e, ui)
                    {
                        $(this).dialog("option", "height", "377px");
                    }
                });
            }

            $dialog.dialog("open");
            return false;
        });
    });

更新 1: 新しいプロジェクト (ASP.NET MVC 4) を作成したところ、次の CSS ルールを使用すると問題が発生することがわかりました。なぜですか?

*
{
    margin: 0;
    padding: 0;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
4

3 に答える 3

3

box-sizing：border-box（デフォルトのテンプレートを使用）を使用すると、jQueryがダイアログサイズを正しく計算しません。openイベントでダイアログの高さを保存し、dragStart/dragStopイベントでダイアログの高さを手動で設定して修正しました。

                    dragStart: function (e, ui)
                    {
                        $(this).parent().height(height);
                    },
                    dragStop: function (e, ui)
                    {
                        $(this).parent().height(height);
                    }
于 2012-07-09T10:37:56.160 に答える
1

jQuery 1.8 は最終的にボックスのサイズ設定を完全に理解し、もはや微調整する必要はありません :)

ドキュメンテーション

于 2012-08-20T05:23:43.273 に答える