Dojo Seed

A starting point for Dojo experiments.

by parente

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dijit/themes/tundra/tundra.css">
<div dojoType="dijit.layout.BorderContainer" liveSplitters="true">
      <div dojoType="dijit.layout.ContentPane" region="top" splitter="false">Header</div>
      <div dojoType="dijit.layout.TabContainer" region="center" splitter="true">
        <div dojoType="dijit.layout.ContentPane" title="Tab1">Content1</div>
        <div dojoType="dijit.layout.ContentPane" title="Tab2">Content2</div>
        <div dojoType="dijit.layout.ContentPane" title="Tab3">Content3</div>
      </div>
      <div dojoType="dijit.layout.AccordionContainer" region="right" splitter="true" minSize="200">
        <div dojoType="dijit.layout.ContentPane" title="Pane1">Sidebar1</div>
        <div dojoType="dijit.layout.ContentPane" title="Pane2">Sidebar2</div>
        <div dojoType="dijit.layout.ContentPane" title="Pane3">Sidebar3</div>
      </div>
      <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="false">Footer</div>
</div>

CSS

html, body, .dijitBorderContainer {width: 100%; height: 100%; padding: 0px;}
.dijitAccordionContainer {width: 200px;}

JavaScript

dojo.require('dijit.layout.BorderContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.layout.AccordionContainer');
dojo.require('dijit.layout.TabContainer');