根據內容以字母順序調整PrimeFaces中的中央佈局單元

Question

我有一個包含「標題」，「頁腳」，「側邊菜單」和「內容區域」的頁面。

我試圖使用PrimeFaces佈局如下安排他們：

頁眉 - >北

頁腳 - >南

側面菜單 - >東

內容區域 - >中心

乍一看，它工作正常。

但是，我的側面菜單包含的鏈接將改變中心區域的內容。目前，當我單擊其中一個鏈接時，如果新內容的長度大於爲中央佈局單元定義的長度，則中心區域的內容將會改變，並且中心區域將出現一個垂直滾動條。

我正在尋找的行爲是動態調整中心區域的大小，向下推動頁腳（南佈局單元）並顯示整個頁面的滾動條。

我使用PrimeFaces佈局是否正確？我應該使用別的東西嗎？

這裏是我的 「身體」 代碼：

<h:body> 

<p:layout fullPage="true"> 

    <p:layoutUnit position="north" size="100"> 
     <ui:include src="header.xhtml" /> 
    </p:layoutUnit> 

    <p:layoutUnit position="south" size="200"> 
     <ui:include src="footer.xhtml" /> 
    </p:layoutUnit> 

    <p:layoutUnit position="east" size="260"> 
     <ui:include src="side-menu.xhtml" /> 
    </p:layoutUnit> 

    <p:layoutUnit position="center"> 
     <ui:insert name="body-content"> 
     </ui:insert> 
    </p:layoutUnit> 
</p:layout> 
</h:body> 

感謝您的幫助

Answer 1

它是正確的，我使用PrimeFaces佈局？我應該使用別的東西嗎？

答：這要看情況。我認爲，p:layout fullPage="true"是一個組件，他們希望創建一個超快速，簡單的頁面，並且沒有足夠的時間來處理視圖層。如果陳列櫃的例子幾乎沒有相應的要求，那麼沒有理由放棄它。

但是，如果你想定製或改變它的行爲或它的功能停止和滾動你自己的。

我準備了一個適合您的要求的開球示例，正如我所說，它並不完整，但它可以激勵您。讓我們從組件開始吧。

<h:form> 
    <p:fieldset legend="West" styleClass="west"> 

    </p:fieldset> 
    <p:panel styleClass="north"> 

    </p:panel> 
    <p:fieldset legend="East" styleClass="east"> 

    </p:fieldset> 
    <p:fieldset legend="Center" styleClass="center"> 

    </p:fieldset> 

    <p:panel styleClass="footer"> 
     <p:commandButton onclick="makeMe();" value="SeeTheMagic"></p:commandButton> 
    </p:panel> 
</h:form> 

可以看出，這些是基本的PrimeFaces組件，在這裏指向CSS本身。 （我使用p:fieldset，因爲我喜歡它的樣子，你可以用p:panel代替）。

讓我們從footer開始。有一件事值得提及，它的位置，我們只是通過bottom:0px和position:absolute將它放置在頁面底部。

.footer{ 
    width:100%; 
    height:30px; 
    padding:30px; 
    background: #000007; 
    clear: both; 
    position: absolute; 
    bottom: 0px; 
} 

中心組件是水平居中的margin 0 auto。還有其他方法可以肯定。此外，如果您想垂直居中，通過邊距很容易。而margin-top:70px只是防止與北方面板重疊。

.center{ 
    margin: 0 auto; 
    width:650px; 
    height:200px; 
    margin-top: 70px; 
    background-color: #f7f7f7; 
} 

東位於最左側和西側;反之亦然。

.east{ 
    width:200px; 
    height:400px; 
    position: absolute; 
    margin-top: 30px; 
    right: 0px; 
    background-color: #f7f7f7; 
} 

.west{ 
    width:200px; 
    height:400px; 
    margin-top: 30px; 
    position: absolute; 
    left: 0px; 
    background-color: #f7f7f7; 
} 

北部組件就像頁腳，但它在頂部當然通過top:0px。

.north { 
    background-color: black; 
    position: absolute; 
    top:0px; 
    width: 100%; 
    height: 40px; 
} 

現在頁面看起來像某事物。類似於p:layout fullPage="true"。應進行自定義的，當然looknfeel，也許你可以看看到新的CSS屬性，如box-shadow（北面板）或等。因此你的要求：

我在尋找的行爲是調整中心區域動態顯示， 按下頁腳（南佈局單元）並顯示整個頁面的滾動條 。

我已經準備了一個內容，最初從中心面板溢出，然後在頁腳上有一個按鈕說明某事。關於魔術和它調用makeMe() JS函數的作用：

只是展開p:panel的高度，現在，如果有，將指南針所有這些內容100項。並且通過position:relative，我們要求頁腳「不要停留在那裏只是粘在中心組件的底部。」

這是它的外觀開始：

如果您加載內容通過AJAX不會有滾動條開始。我只是將很多文本複製到它中，這就是爲什麼最初有一個滾動條。

點擊按鈕後：

是否會有問題，只是提醒我，希望幫助。