如何在窗口調整大小時更改kendo窗口位置

我試圖將kendo窗口放在div內，但是當我更改瀏覽器大小（需要刷新頁面以更改位置）時，kendo窗口位置不會更改。我只是想在頁面的右側顯示兩個帶網格的kendo窗口，當瀏覽器的大小和位置發生變化時，它會改變大小和位置。如何在窗口調整大小時更改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>

感謝

來源

2013-10-28 gurulay

我建議稍微不同的方法，但我認爲，它讓你想什麼...

第一重要的事情就是綁定事件處理程序窗口調整大小，所以我做的是：

// 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窗口的想法。

來源

2013-10-28 16:32:00 OnaBai

如何在窗口調整大小時更改kendo窗口位置

回答

相關問題