javascript - 剣道UI-ウィンドウを正しく開閉できないのはなぜですか？

Question

ウィンドウを開くためにさまざまな方法を試しましたが、これまでのところすべてが失敗します。

私の最初の試みは、次の例に基づいて、次のようなコードでボタンがクリックされたときにウィンドウを開くことでした。

$('#btnUsuarios').click(function (e) {
    onUsuariosLoad();
    var window = $('#usuariosDiv');
    if (!window.data('kendoWindow')) {
        window.kendoWindow({
            draggable: true,
            height: "300px",
            modal: true,
            resizable: false,
            title: "Modal Window",
            width: "65%",
            close: hideUsuarios
        });
    } else {
        window.data('kendoWindow').open();
    }
    hideHomeScreen();
    showUsuarios();

});

onUsuariosLoadは、リモートhtmlからウィンドウのコンテンツをロードする関数です。この関数は、コンテンツが一度だけロードされるようにします。コンテンツが既にロードされている場合は、再度ロードされません。試してみる前に、関数をテストしました。ウィンドウKendoUIウィジェットを実装して、正しく機能することを確認します。

hiddenHomeScreenは、ウィンドウを開くdivから一部の要素を非表示にする関数です。

showUsuariosは、ウィンドウのコンテンツを表示する関数です。

kendoWindowのデータが作成されているかどうかを確認してから、ウィンドウを開くことになっています。作成されていない場合は、作成する必要があります。初めてボタンをクリックすると機能しますが、ウィンドウを閉じてもう一度ボタンをクリックすると、ウィンドウがまったく表示されません（usuariosDivのコンテンツではなく、ウィンドウウィジェットのUIについて話しているので、チェックしましたFirebugとusuariosDivのコンテンツはまだありますが、ウィンドウウィジェットのUIは表示されません）。

私が行った2番目の試みは次のようなものでした：

$('#btnUsuarios').click(function (e) {
    onUsuariosLoad();
   $('#usuariosDiv').kendoWindow({
        draggable: true,
        height: "300px",
        modal: true,
        resizable: false,
        title: "Modal Window",
        width: "65%",
        close : hideUsuarios
    });
    hideHomeScreen();
    showUsuarios();
});

これは最初の試みと似ていますが、同じことが起こります。最初は正常に機能しますが、ウィンドウを閉じたときに、ボタンをもう一度クリックしてもウィンドウを再度開くことができません。

私の3番目の試みは、このページの「ウィンドウの初期化、中央揃え、およびボタンクリックアクションの構成」の例に基づいています。

var win = $("#usuariosDiv").kendoWindow({
    draggable: true,
    height: "300px",
    modal: true,
    resizable: false,
    visible: false,
    title: "Modal Window",
    width: "65%",
    close: hideUsuarios
}).data("kendoWindow");
$('#btnUsuarios').click(function (e) {
    onUsuariosLoad();
   var win = $("#usuariosDiv").data("kendoWindow");
    win.open();
    hideHomeScreen();
    showUsuarios();
});

これはウィンドウを正しく表示しません。指定されたサイズのウィンドウを表示する代わりに、小さなドットのモーダルウィンドウのみを表示します。

これはオープニング部分です。ウィンドウを閉じる際の問題は、ウィンドウのコントロールによってトリガーされたイベントによってそれを実行しようとしたときに発生します。右上隅にある閉じるボタンについて話しているのではなく、ウィンドウに表示しているボタンを指しているのです。

たとえば、ウィンドウを閉じるためにこれを試しました。

$('#btnBack').click(function (e) {
    hideUsuarios();
    var window = $('#usuariosDiv');
    window.data('kendoWindow').close();
});

しかし、次のエラーが発生しますUncaught TypeError: Cannot call method 'close' of undefined。ウィンドウのデフォルトの閉じるボタンに単純に依存しない理由を尋ねる場合、それは手順があるためです。終了したら、ウィンドウを閉じる必要があります。

これは私の見解です：

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")%>" rel="stylesheet" type="text/css" />
    <link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.metro.min.css")%>" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%>"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.signalR-1.0.0-rc1.min.js")%>" type="text/javascript"></script>
    <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3" type ="text/javascript" ></script>
    <script src="<%: Url.Content("~/Scripts/index/templates.js")%>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/index/main.js")%>" type="text/javascript"></script>

    <style type="text/css">
        #verticalMenu {
            top: 39px;
            left: 0px;
        }
    </style>

</head>
<body onload="onPageLoad()">
    <div id="canvasDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: transparent;">
        <div id="alertDiv" style="position: absolute; top: -250px; background-color: #F00; z-index: 50; opacity:1; border-top: 1px solid #FFF; border-right: 1px solid #F5F5F5; border-bottom: 1px solid #D5D5D5; border-left: 1px solid #F5F5F5">
            <div id="msgDiv" style="position:absolute;left:10px; right:10px; bottom: 10px; text-align: center;width: 50%; margin: 0px auto;">Alerta Sismo Detectado</div>
            <div id="btnCloseAlert"  style="position: absolute; top: 0px; right: 0"><span class="k-icon k-i-close"></span></div>
        </div>
        <div id="homeScreenDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: white; z-index: 10; opacity:1">

        </div>
        <div id="usuariosDiv" style="position: absolute; left: 0; width: 100%; height: 100%; background-color: white; z-index: 2; opacity:0">

        </div>
        <div id="sismosDiv" style="position: absolute; left: 0; width: 100%; height: 100%; background-color: white; z-index: 2; opacity:0">
            <div id="leftBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 190px; height: 100%; background-color: white; z-index:20">
                <div onclick="hideSismos()" style="position:absolute;height: 39px; width: 25%; left:0; top:0"><div style="position:absolute; top: 10px; bottom:10px;left:10px;right:10px"><span class="k-icon k-i-arrow-w"></span></div></div>
                <div style="position:absolute;height: 39px; width: 75%; right:0; top:10px; bottom:10px; text-align:center">Sismos</div>
                <ul id="verticalMenu" style="position: absolute; width: 99%; height: auto; display: block;" >
                    <li id="Regiones" style="height: 75px; text-align: center;">Regiones</li>
                    <li id="Clusters" style="height: 75px; text-align: center;">Clusters</li>
                    <li id="Dispositivos" style="height: 75px; top: auto; text-align: center;">Dispositivos</li>
                    <li id="Eventos" style="height: 75px; text-align: center;">Eventos</li>
                </ul>
            </div>
            <div id="selectionBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:9">
                <div class="k-toolbar k-grid-toolbar" style="height: 34px;">
                    <button id="btnAgregarEntry" class="k-button k-button-icontext k-add-button" onclick="swapToNewData(this)"><span class="k-icon k-add"></span>Agregar</button>
                </div>
                <div id="listView" style="background-color: transparent; position: absolute; top: 40px; left: 0px; right: 0px; width:auto; height:auto" ></div>
            </div>
            <div id="dataBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 330px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:8">
                <div id="dataView" style="background-color: transparent; position: absolute; top: 40px; bottom:0px; left: 0px; right: 0px; width:auto; height:auto" ></div>
            </div>
            <div id='myMap' style="border: thin solid black; background-color: white; position: absolute; display: block; min-height: 100%; top: 0px; left: 189px; width: 88%; z-index: 20"></div>
        </div>
    </div>
</body>
</html>

誰かが私が間違っていることを理解するのを手伝ってくれますか？

score 3 · Accepted Answer

同様の問題が発生したので、代わりに毎回新しいウィンドウclose()を使用して作成することをお勧めします。destroy()

score 2 · Accepted Answer

destroy-methodをdeactivate-eventにバインドし、ウィンドウでclose（）-メソッドを使用したいと思います。このようにして、クロージングアニメーションは適切に終了します。

...
deactivate: function() {
   this.destroy();
}
...

score 2 · Accepted Answer

これは元の投稿からかなり後のことですが、ウィンドウの閉じるオプションで70％の倍率が設定されています。

このバグは、同じウィンドウの開閉に影響を与えるようです。ウィンドウは閉じると70％に拡大縮小されますが、開くと100％になることはありません。

これを回避するには、次を追加して、クローズ時に70％にスケーリングするのを停止します。

var emptyWindow = $(theWindowId).data("kendoWindow");
emptyWindow.options.animation.close.effects.zoom.properties.scale = 1;

score 1 · Accepted Answer

挿入

win.open();

以下のコードを使用します。

$("#usuariosDiv").data("kendoWindow").open();

score 0 · Accepted Answer

これはウィンドウを閉じるために機能するはずです：

  $("#btnBack").click( function (e) {
                             $("#usuariosDiv").data("kendoWindow").close();
                        });

また、animation：falseの設定を調べることもできます。開いているウィンドウで。

私はそれに関連したいくつかの同様の問題を抱えていたことを覚えています。

最初の試みに関しては、これを試してみることをお勧めします（最初の作成に.data（ "kendowindow"）を追加しました）

    $("#btnUsuarios").click(function (e) {
    onUsuariosLoad();
    var window = $("#usuariosDiv");
    if (!window.data("kendoWindow")) {
        window.kendoWindow({
            draggable: true,
            height: "300px",
            modal: true,
            resizable: false,
            title: "Modal Window",
            width: "65%",
            close: hideUsuarios
        }).data("kendoWindow");
    } else {
        window.data("kendoWindow").open();
    }
    hideHomeScreen();
    showUsuarios();

});

javascript - 剣道UI-ウィンドウを正しく開閉できないのはなぜですか？

5 に答える 5

Related

Reference