javascript Kendo UI - 为什么我不能正确打开和关闭窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14901566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo UI - Why can't I open and close properly a window?
提问by Uriel Arvizu
I've tried different methods to open my window, but so far everything fails.
我尝试了不同的方法来打开我的窗口，但到目前为止一切都失败了。
My first try was to open the window when a button was clicked with a code like this based on thisexample:
我的第一次尝试是在单击按钮时打开窗口，使用基于此示例的代码如下：
$('#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 is a function that loads the content for the window from a remote html, the function makes sure to only load once the content, if it had been loaded already then it doesn't load it again, I've tested the function before trying to implement the window Kendo UI widget to make sure it works properly.
onUsuariosLoad 是一个从远程 html 加载窗口内容的函数，该函数确保只加载一次内容，如果已经加载，则不会再次加载，我在尝试之前测试了该函数实现窗口剑道 UI 小部件以确保其正常工作。
hideHomeScreen is a function that hides some element from the div that open the window.
hideHomeScreen 是一个函数，它从打开窗口的 div 中隐藏一些元素。
showUsuarios is a function that shows the content for the window.
showUsuarios 是一个显示窗口内容的函数。
It was supposed to check if the data for a kendoWindow had been created then to open the window, else it should create it. The first time I click the button it works, but when I close the window and click again the button, the window isn't show at all (I'm talking about the window widget UI, not the contents of the usuariosDiv, I checked Firebug and the contents for usuariosDiv are still there, but the window widget UI isn't shown).
它应该检查是否已经创建了 kendoWindow 的数据然后打开窗口，否则它应该创建它。我第一次单击按钮时它有效，但是当我关闭窗口并再次单击该按钮时，该窗口根本不显示（我说的是窗口小部件 UI，而不是 usuariosDiv 的内容，我检查了Firebug 和 usuariosDiv 的内容仍然存在，但未显示窗口小部件 UI）。
The second try I did was like this:
我做的第二次尝试是这样的：
$('#btnUsuarios').click(function (e) {
onUsuariosLoad();
$('#usuariosDiv').kendoWindow({
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Modal Window",
width: "65%",
close : hideUsuarios
});
hideHomeScreen();
showUsuarios();
});
This is similar to the first attemp but it happens the same thing: it works fine the first time, but when I close the window it fails to reopen the window when I click again the button.
这类似于第一次尝试，但它发生了同样的事情：它第一次工作正常，但是当我关闭窗口时，当我再次单击按钮时它无法重新打开窗口。
My third try was based on the example Initialize Window, center, and configure button click actionfrom thispage:
我的第三次尝试是基于实例初始化窗口，中心，配置按钮点击动作，从这个页面：
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();
});
This doesn't show the window properly, instead of showing a window with the specified dimensions, it only shows a tiny dot modal window.
这不能正确显示窗口，而不是显示具有指定尺寸的窗口，它只显示一个小点模态窗口。
That's for the opening part, my problem with closing the window comes when I try to do it by an event triggered by a control on the window. I'm not talking about the close button on the upper right corner, I'm refering to any button I have displayed on the window.
那是打开部分，当我尝试通过窗口上的控件触发的事件来关闭窗口时，我的问题就出现了。我不是在谈论右上角的关闭按钮，而是指我在窗口上显示的任何按钮。
For example, I tried this to close the window:
例如，我尝试关闭窗口：
$('#btnBack').click(function (e) {
hideUsuarios();
var window = $('#usuariosDiv');
window.data('kendoWindow').close();
});
But I get the following error: Uncaught TypeError: Cannot call method 'close' of undefined. If you're asking why I don't simply rely on the default close button on the window, it's because there're procedures, that when finished, need to close the window.
但我收到以下错误：Uncaught TypeError: Cannot call method 'close' of undefined. 如果你问我为什么不简单地依赖窗口上的默认关闭按钮，那是因为有一些程序，完成后需要关闭窗口。
This is my View:
这是我的观点：
<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>
Can anyone help me to understand what am I doing wrong?
谁能帮助我了解我做错了什么？
采纳答案by Dominik Kope?
I had a similar problem and instead of close()I suggest using destroy()and creating new window every time.
我有一个类似的问题，而不是close()我建议destroy()每次都使用和创建新窗口。
回答by Lopo
I would prefer to bind the destroy-method to the deactivate-event and use the close()-method on the window. This way, the closing-animation will be properly finished.
我更愿意将销毁方法绑定到停用事件并在窗口上使用 close() 方法。这样，关闭动画将正确完成。
...
deactivate: function() {
this.destroy();
}
...
回答by Will
I realise this is long after the original post but the 70% scale factor is set in the window close options.
我意识到这在原始帖子之后很久了，但是在窗口关闭选项中设置了 70% 的比例因子。
The bug seems to affect opening and closing the same window, as the window gets scaled to 70% on close but never put to 100% on open.
该错误似乎影响打开和关闭同一窗口，因为窗口在关闭时缩放到 70%，但在打开时从未缩放到 100%。
I worked around this by adding the following to stop it scaling it to 70% on close.
我通过添加以下内容来解决这个问题，以阻止它在关闭时将其缩放到 70%。
var emptyWindow = $(theWindowId).data("kendoWindow");
emptyWindow.options.animation.close.effects.zoom.properties.scale = 1;
回答by Majid gharaei
Insted
插入
win.open();
you use below code.
你使用下面的代码。
$("#usuariosDiv").data("kendoWindow").open();
回答by BlueBird
This should work to close a window:
这应该可以关闭窗口：
$("#btnBack").click( function (e) {
$("#usuariosDiv").data("kendoWindow").close();
});
Also you may want to look into setting animation:false; on the window open.
你也可能想看看设置 animation:false; 在打开的窗户上。
I remember I had some similar problems that were associated to that.
我记得我有一些与此相关的类似问题。
As far as your first attempt you may want to try this (added .data("kendowindow") into the first creation)
至于您的第一次尝试，您可能想尝试一下（将 .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();
});
