dijit/layout/BorderContainer

簡介

如果想設計一款應用的介面外觀和一般全螢幕的桌面應用程式相似時，則 dijit/layoutBorderContainer 是一個相當稱手的佈局方式。基本上，這種佈局方式將螢幕區分成「上」、「下」、「左」、「右」、「中」五塊區域；只有「中」這塊區域是必要的，其它都可有可無。在設定各塊區域的尺寸時，只要設定「上」、「下」、「左」、「右」四塊區域，剩下的空間都會留給「中」這個區域。「中」這個區域只能有一個區塊，其它四個方向的區域中的區塊個數則可自訂。區塊必須使用 dijit/layout/ContentPane 或 dojox/layout/ContentPane，至於使用那一種，可根據需求決定。這些區塊都必須容納在一個 BorderContainer 中。

佈局的方式有兩個基本款式： headline 和 sidebar（見圖示），隨應用的需要再加以變化即可。當一個區域中有數個區塊時，layoutPriority 參數的數值會決定區塊的所在位置，數值愈大則愈接近「中」的區域。區塊和區塊間，或區域和區域間可以有間隔 (gutter)，也可以不要有間隔。「上」、「下」、「左」、「右」四個區域中的區塊可以設定具有「把手」(handle) 用以動態調整區塊的大小；但因為「把手」的位置在於區塊和區塊的間隔中，所以只要定了「把手」，有「把手」的地方，區塊間就一定會有間隔。間隔的預設寬度為 5px，「把手」的顏色和間隔的底色相近，眼力不好的人，得注意看。

所有的參數分成兩部份，一部份定在 BorderContainer 的元件中，用來設定整體，一部份則定在各個 ContentPane 中，用來設定每個區塊。

BorderContainer

design

設定 BorderContainer 的基本款式，有 "headline" 及 "sidebar" 兩種，樣式請參看下列圖示。預設為 "headline"。

Headline

Sidebar

gutters

布林值，當 true 時，會在各區塊間生成間隔。預設為 true。gutter 預設的寬度為 5px，如果要變更寬度成 8px，必須修改

.claro .dijitSplitterV, .claro .dijitGutterV {
    width:8px;
}
.claro .dijitSplitterH, .claro .dijitGutterH {
    height:8px;
}

如果要修改「把手」的寬度和顏色，則修改 CSS 如下所示：

.claro .dijitSplitterV .dijitSplitterThumb {
    width:2px;
    background-color:red;
}

liveSplitter

當值為 true 時，拖曳「把手」以改變區塊大小時，區塊的尺寸會立即隨著拖曳的動作變更；當值為 false 時，區塊會一直等到拖曳停止時，才真正改變區塊的尺寸。改變一下範例中的設定值，實際操作一下會更容易理解。預設值為 true。

ContentPane

region

指定 ContentPane 在 BorderContainer 中的所在位置，每一個 ContentPane 都要給，允許值為 : "left", "right", "top", "bottom" 及 "center"。

layoutPriority

當同一個區域有一個以上的 ContentPane 時，用來指定 ContentPane 相對於中央區塊的位置，值為數值，數值愈大，愈靠近中央區塊。

splitter

當設定值為 true 時，產生一個用來改變區塊大小的「把手」。預設為 false。

minSize

當 splitter 設定值為 true 時，該區塊在改變尺寸時，所允許的最小尺寸。若區塊為「左」、「右」，指的是最小的寬度，若為「上」、「下」，指的是最小的高度。

maxSize

當 splitter 設定值為 true 時，該區塊在改變尺寸時，所允許的最小尺寸。若區塊為「左」、「右」，指的是最大的寬度，若為「上」、「下」，指的是最大的高度。

範例

範例中展示一個 headline 模式的佈局。

Headline

CSS

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

範例中的 CSS 中沒有什麼需要特別的設定。

HTML

<body class="claro">
    

        
Top 1
        
Top 2
        
Left
        
Center
        
Right
        
Bottom
    
</body>

範例中以程式法建立 BorderContainer，所 HTML 中只要建立各個掛載點即可。

Script

注意：在第 39~42 行中，對於位於中央的 ContentPane 在 style 的設定中，是完全沒有設定其高和寬的值；這是因為在 BorderContainer 的設計中，中央區塊的大小是計算出來的，整個螢幕扣除其它區塊所佔的位置，剩下的便是中央區塊的大小。

在範例中，每一個 ContentPane 都設定了邊框，並將 margin 和 padding 都設為 0px, 這是為了方便展示；實務上，應該根據需要來設定。

dijit/layout/TabContainer

簡介

dijit/layout/TabContainer 也許是除了 dijit/layout/BorderContainer 之外，另一種廣泛被使用的網頁佈局元件了。外觀的變化也多，標箋可以依設計放在內容的上、下、左，右四個方向的其中一個。若標箋過多，畫面上容納不下，還會自動產生可以移動標箋的按鈕，或依設定產生一個下拉式的選單，直接選取所要查看的內容。

範例

下圖是寬度足以容納所有標箋時的樣子。在網頁下載 3 秒後，會選定顯示 Tab_3 的內容；6 秒後，會在「主控台」列示當時展示內容的 dijit。

下圖是寬度不足以容納所有標箋時，自動產生向左、向右箭頭的樣子。

下圖是寬度不足以容納所有標箋時，自動產生向左、向右箭頭，同時設定 useMenu:true，額外產生下拉式選單的樣子。

CSS

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

CCS 中沒有特別的設定。

HTML

<body class="claro">
    

</body>

HTML 裡只要設定一個掛載點既可。

Script

第 19~25 行建立一個 TabContainer 做為容器。
doLayout:true 設定固定容器的大小，不隨展示內容的多寡而變更容器的大小。
tabPosition 設定標箋所在的位置，有 top, bottom, left-h 及 right-h 四個值可以使用。
useMenu:true 設定會在標箋過多時，額外生成一個下拉式的選單。

第 26~54 行依序建立 5 個 ContentPane 並加入 TabContainer 之中，第一個 Tab 設定為可以關閉，此時在標箋的標示右方會出現一個 X 的符號，按下此符號，會移除這個標箋及其內容。

第 58~60 行建立一個定時器，，在網頁下載 3 秒後，用程式選擇顯示 Tab_3 的內容。
第 61~63 行建立另一個定時器，，在網頁下載 6 秒後，在「主控台」列示當時顯示內容之標箋的 dijit 元件。

dijit/layout/StackContainer

簡介

dijit/layout/StackContainer 是 dojo 中對網頁內容的一種佈局方式。取名叫 "Stack"，就知道內容是像堆疊一般堆在一起，在上方有個控制器，控制器中有對應各份內容的按鈕，點按按鈕，即會顯示對應的內容。

範例

範例中用程式法建立了一個 StackContainer 以及 StackController 做為控制器。另外在控制器的前後端各加了一個按鈕，讓展示的內容可以向前，或向後以輪轉的方式顯示內容。在範例中使用了 dojox/layout/ContentPane 做為內容的容器，因此所有在 dojox/layout/ContentPane 可以設定的參數或可使用的函式，都可以被設定和使用。網頁下載 3 秒後，會在「主控台」中列示當時顯示內容頁的 dijit 物件。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body{
    width: 1000px;
    height:100%;
    margin:0 auto;
    padding-top:20px;
}
.box {
    width:400px;
    height:300px;
}
.left {
    float:left;
}
.right {
    float:right;
}
</style>

.box 定義了整個 StackController 加上 StackContainer 的尺寸。如果控制器的寬度過大，版面就會亂掉，所以要當握控制器寬度及整個元件寬度的配合。
.left 和 .right 定義了將向前按鈕和向後按鈕置放於控制器的左右兩端。

HTML

<body class="claro">
    

        
        
        
        

    
</body>

HTML 中，定義了各個元件的掛載點。將兩個按鈕放在 <span> 的標記中，藉著控制 <span> 標記的位置來控制按鈕的位置。

Script

第 22~25 行建立了一個 StackContainer 的容器。
doLayout:true 固定了 StackContainer 容器的大小。如果設定為 false 時，容器會隨著顯示內容的的大小而改變。
第 27~40 行依序建立了三個 ContentPane 並加入 StackContainer 之中。
title 設定控制器中按鈕的標示。
第 42~45 行建立 stackController。
containerId 屬性值指定表控制的 StackContainer 名稱。
第 46~58 建立兩個按鈕，一個用 back() 函式來控制向前輪轉，一個用 forward() 函式來控制向後輪轉。
第 63~66 行建立個定時器，於網頁下載後 3 秒在「主控台」中列示當時顯示內容頁的 dijit 物件。
selectedChildWidget 屬性可以取得目前顯示內容之 ContentPane 的 dijit。

dijit/layout/AccordionContainer

簡介

dijit/layout/AccordionContainer 是 dojo 的一種佈局方式，顧名思義，它就像一個手風琴 (accordion)，透過點按抬頭欄 (title bar) 以顯示內容。

範例

範例中用程式法建立了一個 AccordionContainer。也在每個抬頭欄的前方加上了表示展開和收歛的小箭頭。在範例中使用了 dojox/layout/ContentPane 做為內容的容器，因此所有在 dojox/layout/ContentPane 可以設定的參數或可使用的函式，都可以被設定和使用。網頁下載 3 秒後，會在「主控台」中列示當時顯示內容頁的 dijit 物件。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body{
    width: 1000px;
    height:100%;
    margin:0 auto;
    padding-top:20px;
}
.claro  .dijitAccordionArrow {
    background:url("js/libs/dijit/themes/claro/images/spriteArrows.png") no-repeat -14px top;
    width:7px;
    height:8px;
    margin-top:-1px;
}
.claro  .dijitAccordionTitleSelected .dijitAccordionArrow {
    background:url("js/libs/dijit/themes/claro/images/spriteArrows.png") no-repeat;
    margin-top:-1px;
}
</style>

.claro .dijitAccordionArrow 設定了表示內容收歛時用的小箭頭圖像，收歛時的箭頭朝右。
.claro dijitAccordionTitleSelected . dijitAccordionArrow 設定了內容展開時的小箭頭圖像，展開時箭頭朝下。
要特別注意圖像所在內容的路徑，必須依照檔案的目錄結構，修改 url 路徑的值。

HTML

<body class="claro">
    

</body>

HTML 中只需設定一個掛載點。

Script

第 19~22 行建立了一個 AccordionContainer 的容器。
doLayout:true 固定了 AccordionContainer 容器的大小。如果設定為 false 時，容器會隨著顯示內容的的大小而改變。
第 23~36 行依序建立了三個 ContentPane 並加入 AccordionContainer 之中。
title 設定抬頭欄的內容。
content 設定所要顯示的內容，內容可以是 HTML 碼。
因為是使用 dojox/layout/ContentPane，所以也可以用 href 這個屬性來動態載入內容。
selected:true 可以用來指定在顯示 AccordionContainer 時，預設要顯示那一份內容。
selectedChildWidget 屬性可以取得目前顯示內容之 ContentPane 的 dijit。
第 39~42 行設定一個定時器，於網頁下載後 3 秒在「主控台」中列示當時顯示內容頁的 dijit 物件。

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() 函式。