Question

我试图将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>

感谢

Answer 1

我会建议采用略有不同的方法，但我认为它可以满足您的需求......

第一个重要的事情是将事件处理程序绑定到窗口调整大小，所以我所做的是：

// 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();
});

您需要这样做，因为窗口实际上是浮动的而不是固定到某个位置。显然还有其他方法可以获得类似的视觉效果，但我不想改变你使用kendo windows的初步想法。

如何在窗口调整大小时更改kendo窗口位置

1 个答案: