作者在 2008-05-16 13:48:49 发布以下内容
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><
html><
head><
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><
title>Split Container</title><
style type="text/css"> @import "dojo/dijit/themes/tundra/tundra.css"; @import "dojo/dojo/resources/dojo.css"</
style><
script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></
script><
script type="text/javascript">dojo.require(
"dojo.parser");dojo.require(
"dijit.layout.SplitContainer");dojo.require(
"dijit.layout.ContentPane");</
script></
head><
body class="tundra"><
div dojoType="dijit.layout.SplitContainer" orientation="horizontal" sizerWidth="10" activeSizing="true" style="border: 1px solid #bfbfbf; width: 400px; height: 300px;"> <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">This is the left part.
</div> <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="80">This is the right part.
</div></
div></
body></
html>有几个属性要注意下:
1. orientation: 两个值。"horizontal"将容器分为左右两部分,而"vertical"则分为上下两部分;
2. sizerWidth: 即中间的分隔条宽度;
3. activeSizing: 同样两个值。"true", 拖动分隔条的时候容器的两部分随着拖动一起动;"false",拖动结束后,即松开鼠标后,容器中的两部分才改变高度或宽度;
4. 要给SplitContainer通过style设置width和height。
然后是ContentPane的几个属性:
1. sizeMin: 即该ContentPane的最小高度或宽度;
2. sizeShare: 相对于其他ContentPane的比例。例如,如果有两个ContentPane,一个该属性是20,另一个是80,那么刚加载好页面显示出来的样子,是一个ContentPane的宽度是另一个的4倍。该属性与像素大小无关,只跟彼此的比例有关系。