如何在窗口调整大小时更改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窗口位置

回答

相关问题