Kendo UI - 为啥我不能正确打开和关闭窗口?
Posted
技术标签:
【中文标题】Kendo UI - 为啥我不能正确打开和关闭窗口?【英文标题】:Kendo UI - Why can't I open and close properly a window?Kendo UI - 为什么我不能正确打开和关闭窗口? 【发布时间】:2013-01-31 19:59:54 【问题描述】:我尝试了不同的方法来打开我的窗口,但到目前为止一切都失败了。
我的第一次尝试是在单击按钮时使用基于this 示例的代码打开窗口:
$('#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();
);
这类似于第一次尝试,但它发生了同样的事情:第一次工作正常,但是当我关闭窗口时,当我再次单击按钮时它无法重新打开窗口。
我的第三次尝试基于来自this 页面的示例初始化窗口、居中和配置按钮单击操作:
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 是对的,window
被 浏览器 使用;你有没有记住事情是并行发生的?我的意思是,你开始加载,但它需要一段时间,你不知道什么时候。因此,如果您调用onUsuariosLoad
并立即打开窗口,那么您开始加载的任何内容(很可能)都不可用。
我使用名称窗口的错误,被剑道演示弄糊涂了。 onUsuariosLoad 函数只加载一次内容,如果内容已经加载,则不会再次加载,我在尝试实现 Kendo UI 窗口之前确定了它。正如我在问题中提到的,它在我第一次打开窗口时工作,内容被加载然后显示,但是当我关闭窗口并尝试通过单击按钮再次打开它时,没有显示任何内容,我意思是,窗口根本不显示。
【参考方案1】:
我遇到了类似的问题,我建议使用 destroy()
而不是 close()
并每次都创建新窗口。
【讨论】:
是的,这就是我最终所做的,无论如何感谢您的麻烦。【参考方案2】:我更愿意将销毁方法绑定到停用事件并在窗口上使用 close() 方法。这样,结束动画就可以正常完成了。
...
deactivate: function()
this.destroy();
...
【讨论】:
【参考方案3】:我意识到这是在原始帖子之后很久,但在窗口关闭选项中设置了 70% 的比例因子。
该错误似乎会影响打开和关闭同一个窗口,因为窗口在关闭时缩放到 70%,但在打开时从未达到 100%。
我通过添加以下内容来解决这个问题,以阻止它在关闭时将其缩放到 70%。
var emptyWindow = $(theWindowId).data("kendoWindow");
emptyWindow.options.animation.close.effects.zoom.properties.scale = 1;
【讨论】:
【参考方案4】:安装
win.open();
你使用下面的代码。
$("#usuariosDiv").data("kendoWindow").open();
【讨论】:
【参考方案5】:这应该可以关闭一个窗口:
$("#btnBack").click( function (e)
$("#usuariosDiv").data("kendoWindow").close();
);
您可能还想研究设置动画:假;在打开的窗口上。
我记得我有一些与此相关的类似问题。
就您的第一次尝试而言,您可能想尝试一下(将 .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);
附加了以下属性。然后当我再次单击该按钮时,窗口显示但缩放,我不知道为什么会发生这种情况。
我尝试升级到 jquery 1.8+ 但没有任何改变
你是说它现在可以工作但在第二次加载时缩放到 70%?
是的。我读到 Kendo UI 中有一个错误会攻击窗口的 -webkit-transform: scale(0.7);
属性,但是使用 jquery 1.8+ 的解决方案对我不起作用,我不知道如何避免这种情况或删除该属性。
以上是关于Kendo UI - 为啥我不能正确打开和关闭窗口?的主要内容,如果未能解决你的问题,请参考以下文章