SplitContainer ( author:amushen email:amushen@yahoo.com.cn qq:38371354 )
相关的文件
dojo.widget.LayoutContainer;dojo.widget.HtmlWidget;dojo.style;
三个js类,某些属性方法也可以参看那三个的源文件.
这个SpliterContainer的实现思路是:
在SpliterContainer内添加一个<div>这个div是中间那个调整条(程序里面的名字:SizingLine),这个调整条可以拖动,通过响应onMouseMove来调整调整条的位置,同时计算出左右两个区域的动态宽度,最后响应OnMouseUp事件,将左右两个区域的宽度固定.
一些属性:
orientation: 标识分隔的方向,默认取值是:horizontal,表示是水平方向分隔,取任何其它值都表示垂直分隔(但一般明确的标识垂直分隔的值是:vertical)
sizerWidth : 分隔线的宽度,默认取值是15
persist : 是否为本次会话保存当前调整的分隔位置。默认值为true。即如果当前会话不结束,那么客户端所调整的位置便一直有效!
activeSizing : 是否在调整位置的时候,内容跟着动态变化。0表示不会跟着动态变化,直到鼠标释放之后,里面的内容才开始调整;1则反之。
paneWidth :SplitContainer的宽度
paneHeight:SplitContainer的高度,这两个属性甚用,因为他们直接生效
( author:amushen email:amushen@yahoo.com.cn qq:38371354 )
SplitContainer所包含的组件,可以设置下列属性:
sizeMin – 默认值为10,本组件在SplitContainer容器中可允许的最小宽度,即拖动缩小的时候,不能小于本值。
sizeShare – 默认值为10,这个值的意思是本组件在容器中所占的宽度,请注意,这是一个相对值。比如,父容器有两个子组件,如果这两个子组件的sizeShare均设置为1(或均设置为其它任意相等的两个数值),意味着每个组件各占据50%的宽度。注意,在SplitContainer容器中的组件,你不能通过style=”width:XXpx”这样的style代码来设置宽度,将不会起作用。
其它不常用的属性:
widgetType: "SplitContainer"
{//下面的都是调整宽度的内部方法,不用外部调用
paneBefore: 拖动分割条时,左边的节点
paneAfter: 拖动分割条时,右边的节点
paneBefore.sizeActual : 拖动时,左边节点的动态大小,当执行过layoutPanels()方法后,这个动态的大小就会成为实际的大小
updateSize()方法:这个方法比较迷惑人,大家不要调用它来调整大小,因为这个是SplitContainer的内部方法,就是内部响应拖动事件以后自动调用的.
virtualSizer对象 :这个是调整大小的时候那个虚拟的调整条,就是颜色透明的那个,可以拖动的.
////////
}
domNode.* : 这个属性用来读取在定义的时候写入标签的属性.
比如用户写了:<div dojoType="SplitContainer" UserId="111222" widgetId='ss' /> ,
那么 dojo.widget.byId('ss').domNode.UserId 就能得到111222.这个我觉得比较有用,比如为节点增加业务方面的数据,
而且,如果对css比较熟悉的话,也可以用domNode.style来直接修改节点的样式
一些方法:
layoutPanels() :调整大小中,最最最关键的方法.当用户修改每个区域的sizeShare属性后,调用这个方法,然后才能实现大小的调整.也就相当于重新设定大小
saveState() : 调整大小后,调用这个方法,将保存现在大小到cookies
restoreState(): 从cookies中读取保存打大小,注意,调用完这个以后,需要再调用layoutPanels()方法来更新大小.//这里保存到cookies实效期好像是关闭浏览器后就实效了
原创,如果转载请注明出处,//shennan qq:38371354