0

我试图将剑道窗口放在 div 内，但是当我更改浏览器大小时剑道窗口位置不会改变（需要刷新页面才能改变位置）。我只想在页面右侧显示两个带有网格的剑道窗口，当浏览器大小和位置发生变化时，它会改变大小和位置。 

<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>

谢谢

4

1 回答 1

0

我会建议一种稍微不同的方法，但我认为它可以满足您的需求...

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

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

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

于 2013-10-28T16:32:00.713 回答