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 物件。

熊伯的外接硬碟

2015年11月3日星期二