Dojo 1.0のレイアウト

以前にExtでやった「左にメニュー、右にコンテンツ」みたいなレイアウト(http://d.hatena.ne.jp/jgoamakf/20071105)を Dojo 1.0 でやった場合のソース。

  • LayoutContainer の中に ContentPane
  • 場所は layoutAlign で指定

がポイントか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true">
</script>
<script type="text/javascript">
    dojo.require("dijit.layout.LayoutContainer"); // 使う Dojo のライブラリの指定。
    dojo.require("dijit.layout.ContentPane");
    dojo.require("dojo.parser"); // dojoType とか layoutAlign 等の Dojo で使う属性の処理をする。
</script>
<style type="text/css">
    @import "dojo/resources/dojo.css";
    @import "dijit/themes/dijit.css";
</style>
</head>
<body>
<div dojoType="dijit.layout.LayoutContainer" id="maindiv">
    <div dojoType="dijit.layout.ContentPane" layoutAlign="left"
        style="background-color: #FFEEEE">
        Left
    </div>
    <div dojoType="dijit.layout.ContentPane" layoutAlign="client"
        style="background-color: #EEEEFF">
        Right
    </div>
</div>
</body>
</html>