調整窗口大小時如何更改劍道窗口位置

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

您需要執行此操作，因為窗口實際上是浮動的，並且沒有固定在某個位置。 顯然，還有其他方法可以獲得相似的視覺效果，但我不想更改使用劍道窗口的最初想法。