3

URL をダイアログにロードする以下の関数があります。その URL が開かれると、ドキュメントの準備ができたときに関数が実行され、その関数は値に応じて div を表示または非表示にします。これにより、ダイアログが拡大され、自動高さは機能しますが、ダイアログは下に拡大され、中央に配置されなくなります。

そのため、ダイアログを開く > ダイアログで URL を開く > パネル実行を表示する > ダイアログが高さを拡張する > ダイアログが中央に配置されなくなりました。

コードは自動再センタリングを試みました

$.ui.dialog.prototype.options.autoReposition = true;
$(window).resize(function () {
    $(".editDialog").dialog("option", "position", "center");
    $(".ui-dialog-content:visible").each(function () {
        $(this).dialog("option", "position", $(this).dialog("option", "position"));
    });
});
$(".ui-dialog-content").resize(function () {
    $(".ui-dialog-content:visible").each(function () {
        $(this).dialog("option", "position", $(this).dialog("option", "position"));
    });
});

ダイアログコード

$(document).ready(function () {
    var width = $(window).width() / 2;
    $.ajaxSetup({ cache: false });

$(".editDialog").live("click", function (e) {
        var url = $(this).attr('href');
        $("#dialog-edit").dialog({
            title: 'Edit',
            autoOpen: false,
            resizable: true,
            autoResize:true,
            minHeight: 'auto',
            width: width,
            modal: true,
            draggable: true,
            open: function (event, ui) {
                //Show the loading div on open.
                $("#dvLoading").show();
                //adding a callback function wich will be launched after the loading
                $(this).load(url,function(response, status, xhr) {
                    if (status == "error") {
                        var msg = "Sorry but there was an error: ";
                        $(this).html(msg + xhr.status + " " + xhr.statusText);
                    } else $("#dvLoading").hide();
                });
            },
            close: function (event, ui) {
                $(this).dialog('close');
            }
        });

        $("#dialog-edit").dialog('open');
        return false;
    });

URL ドキュメント対応表示/非表示の分割

$(document).ready(function () {
    showPanel()
});
function showPanel()
{
    var panel = $("#lstAssetTypes").val();
    panel = panel.substr(panel.indexOf(",") + 1)

    switch (panel)
    {
        case "User":
            $("#dvWKS").show();
            $("#dvNTW").hide();

            break;
        case "Network":
            $("#dvWKS").hide();
            $("#dvNTW").show();
            break;
        default:
            break;
    }
}

呼び出される Div の HTML

 <div id="dialog-confirm" style="display: none">
    <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
        Are you sure to delete?
    </p>
</div>
<div id="dialog-edit" style="display: none">
    <div id="dvLoading" class="loading"><img src="~/Images/loading.gif"><p>Loading please wait...</p></div>
</div>
<div id="dialog-view" style="display: none">
</div>
4

2 に答える 2

2

高さの変化を自動的に検出することはできないようです。そのためのイベントはありません。代わりに、再配置コードを手動で呼び出す必要があります。次のような関数を使用します。

var reposition_dialog = function() {
    $("#dialog-edit").dialog("option", "position", "center");
        $(".ui-dialog-content:visible").each(function () {
        $(this).dialog("option", "position", $(this).dialog("option", "position"));
    });
}

(エラーのように見えたので、コードから .editDialog を #dialog-edit に変更しました)

コンテンツの変更が完了したら、関数を呼び出すだけです。

$(document).ready(function () {
    showPanel()
});
function showPanel()
{
    var panel = $("#lstAssetTypes").val();
    panel = panel.substr(panel.indexOf(",") + 1)

    switch (panel)
    {
        case "User":
            $("#dvWKS").show();
            $("#dvNTW").hide();

            break;
        case "Network":
            $("#dvWKS").hide();
            $("#dvNTW").show();
            break;
        default:
            break;
    }
    reposition_dialog();
}

本当に自動的に検出したい場合は、何らかの理由でコンテンツがいつ変更されるかを予測できない場合にのみ行います。次のスレッドをご覧ください: jQuery を使用して要素のコンテンツの変更を検出する

于 2013-08-01T16:53:40.787 に答える
0

次のことを試してください。

$.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                            $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                            $(window).scrollLeft()) + "px");
    return this;
}

$(dialogID).center();

// calling that function again on resize of window
$(window).resize(function(){
   $(dialogID).center();
});

// or you can either call it whenever your dialog is updated with new URL etc etc.
于 2013-08-01T16:52:32.810 に答える