dijit/layout/BorderContainer

簡介

dijit/layout/BorderContainer 是 dojo 針對網頁應用畫面的設計，所提供眾多佈置的其中一種，BorderContainer 是其中應用的最廣泛的一種佈置，而且最常被用套在應用系統的主畫面上。BorderContainer 的佈置又分為 headline 及 sidebar 二形態。基本上，二者都將螢幕分割成，上(top)、下 (bottom)、左 (left)、右 (right) 及中央 (center) 五大區塊。其中，只有中央區塊一定要定義，其它區塊則是選項；也可以有多個相同位置的區塊，例如兩個上方的區塊，或是二個左方的區塊，在佈置上非常具有彈性。每個區塊都由 dijit/layout/ContentPane 或 dojox/layout/ContentPane 所構成，因此，可以依需求不論是直接改變，或是引入外部的網頁以改變個區塊中的內容，。

範例

headline

當 design 屬性設定為 "headline" 時，上方、下方的橫幅會橫跨整個有效寬度，範例中 CSS 中的 width 設定為 1000px。

sidebar

當 design 屬性設定為 "sidebar" 時，左、右的直欄會佔據整個有效高度，範例中 CSS 中的 height 設定為 100%。

CSS

<style>
html {
    box-sizing:border-box;
    height:100%;
}
body{
    box-sizing:border-box;
    width: 1000px;
    height:100%;
    margin:0 auto;
    padding:20px;
    overflow:auto;
}
</style>

將 body 的寬度設為 1000px ，並將其置於螢幕左右的中間。

HTML

<body class="claro">

    Top 1
    Top 2
    Left
    Right
    Center
    Bottom

</body>

設定 BorderContainer 和各個 ContentPane 的掛載點，注意 ContentPane 的掛載點都包含在 BorderContainer 的<div><／div> 的標記對中。

Script

BorderContainer 的屬性有：
design: 設定佈置的形態，有 "headline" 及 "sidebar" 兩個值可供選擇。
gutters: 設定各 ContentPane 的邊框之間是否要有間隔。
liveSplitters: 設定各 ContentPane 移動把手是否在移動時，以動畫方式立即顯示。

ContentPane 的屬性有：
region: 設定 ContentPane 的所在位置，每一個 ContentPane 都要設定。
spliter: 設定移動把手，如果有設定為 true，則該 ContentPane 可以利用移動把手改變高度，或改變寬窄。
minSize 及 maxSize: 當有設定移動把手時，可以加設該 ContentPane 的最小及最大的高度，或寬度。
各 ContentPane，除了中央那個，其它的都要用 style 設定寬度，或高度。上、下的 ContentPane 要設定高度，右、右的 ContentPane 要設定寬度。在將定義好尺寸的 ContentPane 依 region 中所定義擺定後，剩下的空間都歸中央的 ContentPane 所有。
在範例中，BorderContainer 和每一個 ContentPane 都在 style 屬性中，定義了邊框及邊框的顏色，這樣比較容易看清楚各 ContentPane 所佔據的位置。最後，別忘了呼叫 BorderContainer 的 startup() 函式。

熊伯的外接硬碟

2015年10月4日星期日