0

div 内に剣道ウィンドウを配置しようとしましたが、ブラウザーのサイズを変更しても剣道ウィンドウの位置が変わりません (位置を変更するにはページを更新する必要があります)。ページの右側にグリッドのある2つの剣道ウィンドウを表示したいのですが、ブラウザのサイズと位置が変わるとサイズと位置が変わります。 

<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 に答える