如何在w2ui中將佈局Widget擴展爲全高？

我正在嘗試一個相對較新的JavaScript/jQuery UI庫，w2ui。我的LAMP應用程序中有一個佈局工作，但我想知道如何使佈局div佔據屏幕的整個高度。這裏是官方網站的demo of a resizable layout。如何在w2ui中將佈局Widget擴展爲全高？

下面是HTML DIV這將成爲我的佈局容器：

<div 
    id="layout" 
    style="width: 100%; height: 600px; margin-bottom: 10px;" 
></div>

以「600px的」作爲一個高度的作品，而不是「100％」，這使得它無形。

和JavaScript（只是爲了簡潔，刪除了幾個位）：

var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;'; 
    $('#layout').w2layout({ 
     name: 'layout', 
     panels: [ 
      { type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' }, 
      { 
       type: 'left', size: 800, resizable: true, style: pstyle, content: 'tab1' 
      }, 
      { type: 'main', style: pstyle, content: 'main' }, 
      { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' } 
     ] 
    });

的layout docs不提設定％的高度，雖然它的初期！也許這個問題會作爲一個提示。

解決方法之一是讀取佈局頂部的Y尺寸，然後從屏幕高度中減去此尺寸，然後創建該高度的佈局。這可能會工作，但如果屏幕調整大小，我不得不重新計算和重置高度，這有點哈克。

我會嘗試通過其他渠道獲得答案，如果我成功，我會在這裏發佈。

來源

2013-05-12 halfer

（Re downvote，我想我已經厭煩anon_coward，誰downvoted我的職位，這是完全無關的）。 – halfer 2013-07-03 21:27:45

下面是我現在使用的hacky解決方案;然而，更好的一個值得努力。公平地說，這在Firefox/OSX中非常出色，在我處於開發階段時也是如此。

新的HTML：

<!-- Here's the panel system --> 
    <div id="layout-container" style="height:700px;"> 
     <div id="layout" style="width: 100%; height: 100%;"></div> 
    </div>

額外的JavaScript，執行之前，在問題的代碼（道具this answer爲resize東西）：筆者這個庫具有非常：

function setLayoutContainerHeight() 
{ 
    // Get top position of layout container, subtract from screen height, subtract a bit for padding 
    var y = $('#layout-container').position().top; 
    var layoutHeight = $(window).height() - y - 10; 
    $('#layout-container').css('height', layoutHeight + 'px');  
} 

// Whenever the window changes size, recalculate the layout container height 
setLayoutContainerHeight(); 
$(window).resize(setLayoutContainerHeight);

更新慷慨提供several ways to achieve a full-height layout，所有這些都比我的黑客更好！

來源

2013-05-12 19:33:58 halfer

如何在w2ui中將佈局Widget擴展爲全高？

回答

相關問題