2016年4月6日 星期三

dijit/layout/BorderContainer

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, 這是為了方便展示;實務上,應該根據需要來設定。

沒有留言:

張貼留言