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。

熊伯的外接硬碟

2015年11月4日星期三