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)
|
カテゴリ
新型コロナウイルス 主インデックス Haskell 記事リスト 圏論記事リスト 考えるということのリスト 考えるということ ラッセルのパラドックス Haskell Prelude Ocaml ボーカロイド 圏論 jQuery デモ HTML Python ツールボックス XAMPP Ruby ubuntu WordPress 脳の話 話のネタ リンク 幸福論 キリスト教 心の話 メモ 電子カルテ Dojo JavaScript C# NetWalker ed と sed HTML Raspberry Pi C 言語 命題論理 以前の記事
最新のトラックバック
最新のコメント
ファン
記事ランキング
ブログジャンル
画像一覧
|
ファン申請 |
||