人気ブログランキング | 話題のタグを見る

タブコンテナ

Firefox のようなタブを持った画面を作るためにはタブコンテナ(dijit.layout.TabContainer) を使う。次のサンプルプログラム tab_container.html を コピペして localhost のサーバーにアクセスしてほしい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layout Container Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<style>
/* NOTE: for a full screen layout, must set body size equal to the viewport. */
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.LayoutContainer");
dojo.require("dijit.layout.TabContainer");
</script>
</head>
<body class="tundra">

<div dojoType="dijit.layout.TabContainer" id="mainTabContainer" style="width: 100%; height: 100%">
<div dojoType="dijit.layout.ContentPane" title="Tab 1" id="Tab1">
To make a Tab is ...
</div>
<div dojoType="dijit.layout.ContentPane" title="Tab 2" id="Tab2">
So easy like this.
</div>
<div dojoType="dijit.layout.ContentPane" title="Tab 3" id="Tab3" closable="true">
And it's also easy to let them Closable.
</div>
</div>

</body></html>

タブコンテナ(dijit.layout.TabContainer) に入れた子ウィジェットの title 属性の設定値がタブのタイトルに表示される。また、削除可能なタブも子ウィジェットの closable 属性を true にするだけで簡単につくることができる。
by tnomura9 | 2007-11-19 18:34 | Dojo | Comments(0)
<< スタックコンテナ アコーディオンコンテナ >>