dijit控件布局
tab标签布局
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css"><link id="themeStyles" rel="stylesheet" href="../dojo/resources/dojo.css"><link id="themeStyles" rel="stylesheet" href="../dojo/dojox/grid/resources/Grid.css"><link id="themeStyles" rel="stylesheet" href="../dojo/dojox/grid/resources/tundraGrid.css"><script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script><script type="text/javascript">dojo.require('doh.runner');dojo.require("dijit.dijit"); // optimize: load dijit layerdojo.require("dijit.layout.TabContainer");dojo.require("dijit.layout.ContentPane");dojo.require("dojo.parser");// scan page for widgets and instantiate them</script></head><body data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 500px; height: 200px;", tabPosition:"left-h"'><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first tab", selected:true'>Left tabs</div><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second tab", closable:true'>Lorem ipsum and all around - second...</div><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last tab"'>Lorem ipsum and all around - last...</div></div><br><div id="top" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 500px; height: 200px;", tabPosition:"top"'><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first tab", selected:true'>Left tabs</div><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second tab", closable:true'>Lorem ipsum and all around - second...</div><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last tab"'>Lorem ipsum and all around - last...</div></div><br><div id="bottom" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 500px; height: 200px;", tabPosition:"bottom"'><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first tab", selected:true'>Left tabs</div><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second tab", closable:true'>Lorem ipsum and all around - second...</div><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last tab"'>Lorem ipsum and all around - last...</div></div><br><div id="rightTabs" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 500px; height: 200px;", tabPosition:"right-h"'><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first tab", selected:true'>Left tabs</div><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second tab", closable:true'>Lorem ipsum and all around - second...</div><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last tab"'>Lorem ipsum and all around - last...</div></div></body></html>?
dijit.form.BorderContainer布局
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css"><script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script><script type="text/javascript">dojo.require("dijit.dijit"); // optimize: load dijit layerdojo.require("dijit.layout.BorderContainer");dojo.require("dijit.layout.ContentPane");dojo.require("dijit.form.FilteringSelect");</script></head><body data-dojo-type="dijit.layout.BorderContainer"data-dojo-props='style:"width: 100%; height: 728px; border: 2px solid blue;"'><div role="banner" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id:"border1-top", region:"top", style:"background-color: #b39b86; border: 15px black solid; height: 50px;", splitter:true'>top bar (resizable)</div><div role="navigation" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id:"border1-left", region:"left", style:"background-color: #acb386; border: 10px green solid; width: 100px;",splitter:true, minSize:150, maxSize:250'>left (resizable b/w 150 → 250)</div><div role="main" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id:"border1-center", region:"center", style:"background-color: #f5ffbf; padding: 30px;"'>main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />(to check we're copying children around properly).<br /><select data-dojo-type="dijit.form.FilteringSelect"><option value="1">foo</option><option value="2">bar</option><option value="3">baz</option></select>Here's some text that comes AFTER the combo box.</div><div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id:"border1-right", region:"right", style:"background-color: #acb386; width: 100px;"'>right (fixed size)</div><div role="contentinfo" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id:"border1-bottom", region:"bottom", style:"background-color: #b39b86; height: 50px;", splitter:true'>bottom bar (resizable)</div></div></body></html>?