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

スタックコンテナ

スタックコンテナ(dijit.layout.StackContainer) は、紙芝居のように画面が重なった形になっている。スタックコンテナを指定して back() 関数や forward() 関数を実行させると画面を切り替えることができる。下にサンプルプログラム stack_container.html のコードを示した。(ブログのセキュリティのため onClick はキャラクターコードを全角英数にしてあるのでコピペだけでは動作しない。その部分を半角英数に書き換える必要がある。)

これで、Dojoのレイアウトウィジェットで分かりやすいのはすべて紹介したが、これだけでも色々なアプリケーションができそうな気がする。また、ウィジェットはオブジェクト指向で設計されているようなので、スタックコンテナの画面を操作するには、スタックウィジェットにメッセージ forward() を送るだけになっている。Dojoは慣れてくるとかなりプログラムしやすい設計になっているのではないだろうか。日本語の入門書が出てくるのが待ち遠しい。

<!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>Stack 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>
<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.StackContainer");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<button id="previous" onClick="dijit.byId('mainTabContainer').back()"><</button>
<button id="next" onClick="dijit.byId('mainTabContainer').forward()">></button>

<div id="mainTabContainer" dojoType="dijit.layout.StackContainer"
style="width: 50%; border:1px solid black; height: 300px;">
<div id="Page1" dojoType="dijit.layout.ContentPane" label="Page1">
<h1 align="center">Page 1</h1>
<p align="center">mukasi mukasi ...</p>
</div>

<div id="Page2" dojoType="dijit.layout.ContentPane">
<h1 align="center">Page 2</h1>
<p align = "center">arutokoro ni ...</p>
</div>

<div id="Page3" dojoType="dijit.layout.ContentPane" >
<h1 align="center">Page 3</h1>
<p align="center">ojiisan to obaasan ga sunde imasita</p>
</div>

</div>
</body></html>
by tnomura9 | 2007-11-19 19:13 | Dojo | Comments(0)
<< 速習 Dojo ウィジェット タブコンテナ >>