logo标签列表

Kendo UI-为什么我无法正确打开和关闭窗口？

javascriptjquerywindowkendo-ui
6
我尝试了多种方法来打开我的窗口，但目前为止一切都失败了。
我的第一个尝试是在按钮被点击时打开窗口，使用了类似于这个示例中的代码：
$('#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加载窗口的内容。该函数确保仅加载一次内容，如果已经加载，则不再加载。在尝试实现Kendo UI窗口小部件之前，我已经测试了该函数，以确保它可以正常工作。
hideHomeScreen是一个函数，用于隐藏打开窗口的div中的某些元素。
showUsuarios是一个函数，用于显示窗口的内容。
本应检查是否已创建kendoWindow的数据，然后打开窗口，否则应创建该数据。第一次单击按钮时它可以正常工作，但是当关闭窗口并再次单击按钮时，窗口完全不显示（我指的是窗口小部件UI，而不是usuariosDiv的内容，我检查了Firebug，usuariosDiv的内容仍然存在，但窗口小部件UI没有显示）。
我的第二次尝试如下：
$('#btnUsuarios').click(function (e) {
    onUsuariosLoad();
   $('#usuariosDiv').kendoWindow({
        draggable: true,
        height: "300px",
        modal: true,
        resizable: false,
        title: "Modal Window",
        width: "65%",
        close : hideUsuarios
    });
    hideHomeScreen();
    showUsuarios();
});

这与第一次尝试类似，但发生了同样的事情：第一次正常工作，但当我关闭窗口后再次单击按钮时，它无法重新打开窗口。

我的第三次尝试基于此页面中的示例初始化窗口、居中并配置按钮点击操作：

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>

有人能帮我理解我做错了什么吗？

永远不要将变量命名为 window。 - jbabey
几个问题：@jbabey是正确的，window被浏览器使用；你有没有记住事情是并行发生的？我的意思是，你开始加载但需要一段时间，你不知道什么时候。因此，如果你调用onUsuariosLoad并立即打开窗口，无论你已经开始加载什么，它（很可能）不可用。 - OnaBai
我的错误是使用了窗口名称，被Kendo演示搞混了。函数onUsuariosLoad仅在加载内容一次时加载，如果内容已经加载，则不会再次加载，在尝试实现Kendo UI窗口之前，我确保了这一点。正如我在问题中提到的那样，第一次打开窗口时它可以工作，内容被加载并显示，但是当我关闭窗口并尝试通过单击按钮再次打开它时，什么也没有显示，我的意思是，窗口根本没有显示出来。 - Uriel Arvizu
5个回答
3

我遇到了类似的问题，建议您使用destroy()而不是close()，并且每次创建新窗口。

是的，那就是我最终做的事情，无论如何还是谢谢你费心了。 - Uriel Arvizu
2

我更倾向于将destroy-method绑定到deactivate事件，并在窗口上使用close()方法。这样，关闭动画将被正确完成。

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

我知道这篇文章发表已经很久了，但是70%的比例因子设置在窗口关闭选项里。

这个问题似乎影响打开和关闭相同的窗口，因为在关闭时窗口会被缩放到70％，但在打开时从未恢复到100％。

我通过添加以下内容来解决这个问题，防止它在关闭时缩放到70％。

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

Insted 

win.open();

你使用以下代码。
$("#usuariosDiv").data("kendoWindow").open();
0

这应该可以用来关闭一个窗口：

  $("#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();

});
我尝试过了，但是不知道为什么，在关闭后，以下属性会附加到窗口样式“-webkit-transform: scale(0.7);”。然后当我再次点击按钮时，窗口被缩放显示，我不知道为什么会发生这种情况。 - Uriel Arvizu
我尝试升级到jQuery 1.8+，但没有改变任何东西。 - Uriel Arvizu
你是说现在它可以工作，但第二次加载时缩放到了70%？ - BlueBird
是的。我读到了Kendo UI中有一个错误，会攻击窗口的-webkit-transform: scale(0.7);属性，但使用jquery 1.8+的解决方法对我不起作用，我不知道如何避免这个问题或删除那个属性。 - Uriel Arvizu
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接