[英]How to change kendo window position when window resize
我尝试将kendo窗口放在div内,但更改浏览器大小时,kendo窗口的位置不会改变(需要刷新页面以更改位置)。 我想在页面的右侧显示两个带有网格的剑道窗口,并且当浏览器的大小和位置改变时,它也会改变大小和位置。
<script type="text/javascript">
$(document).ready(function () {
$("#templateWindow").kendoWindow({
actions: {},
title: "Recent Report Templates",
width: $("#rightCol").width(),
draggable: false,
resizable: false
})
.closest(".k-window").css({
top: $("#rightCol").offset.top,
left: $("#rightCol").offset.left
});
var templateWindow = $("#templateWindow");
var offset = templateWindow.offset();
var top = offset.top;
var bottom = top + templateWindow.height() + 35;
$("#RecentWindow").kendoWindow({
actions: {},
title: "Recent Run Reports",
width: $("#rightCol").width(),
draggable: false,
resizable: false
})
.closest(".k-window").css({
top: bottom,
left: $("#rightCol").offset.left
});
$("#rightCol").css("min-height", $("#templateWindow").height() + $("#RecentWindow").height() + 100);
});
<div id="leftCol" style="width:40%; float:left;">
Left Contents
</div>
<div id="rightCol" style="width:55%; float:right">
<div id="templateWindow">
Right top contents
</div>
<div id="RecentWindow">
Right bottom contents
</div>
</div>
谢谢
我建议采用一种略有不同的方法,但我认为它可以满足您的需求...
首先重要的是将事件处理程序绑定到窗口调整大小,所以我要做的是:
// Create Template window with the width that I want (55%)
var template = $("#templateWindow").kendoWindow({
actions : {},
title : "Recent Report Templates",
width : "55%",
draggable: false,
resizable: false
}).data("kendoWindow");
// Same for Recent Report window
var recent = $("#RecentWindow").kendoWindow({
actions : {},
title : "Recent Run Reports",
width : "55%",
draggable: false,
resizable: false
}).data("kendoWindow");
// Create a function that places template window in the top
// right position (actually I've left a 5 pixels margin, I think
// it is nicer)
function placeTemplateWindow()
template.wrapper.css({ top: 5, right: 5 });
}
// Create a function that places recent window 5px bellow template window
function placeRecentWindow() {
var top = template.wrapper.position().top + template.wrapper.outerHeight() + 5;
recent.wrapper.css({top: top, right: 5 });
}
// Initially windows placement
placeTemplateWindow();
placeRecentWindow();
// Intercept any browser resize and re-invoke the placement windows
$(window).resize(function () {
placeTemplateWindow();
placeRecentWindow();
});
您需要执行此操作,因为窗口实际上是浮动的,并且没有固定在某个位置。 显然,还有其他方法可以获得相似的视觉效果,但我不想更改使用剑道窗口的最初想法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.