dojo layout test

HTML

<body class="claro">
  <div data-dojo-type="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Top pane</div>
    
    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center'">
      <div data-dojo-type="dijit.layout.ContentPane" title="tab #1">tab pane #1</div>
      <div data-dojo-type="dijit.layout.ContentPane" title="tab #2">tab pane #2</div>
      <div data-dojo-type="dijit.layout.ContentPane" title="tab #3">tab pane #3</div>
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div>
  </div>
</body>

CSS

@import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css";

JavaScript

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.AccordionPane");
dojo.require("dojo.parser");


dojo.addOnLoad(init);

function init() {

  dojo.parser.parse();
}