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

熊伯的外接硬碟

2015年11月4日星期三