索引
HT for Web
提供了分割组件类ht.widget.SplitView
,分割组件用于左右或上下分割两个子组件,
子组件可为HT
框架提供的组件,也可为HTML
的原生组件,子组件以position
为absolute
方式进行绝对定位。
通过splitView = new ht.widget.SplitView(leftView, rightView, orientation, position);
初始化构建一个分割组件对象。
leftView
左组件或上组件
rightView
右组件或下组件
orientation
字符串类型,默认为horizontal
或h
代表左右分割,可设为vertical
或v
代表上下分割
position
分割位置,默认值为0.5
,如果设置值为0~1
则按百分比分割,大于1
代表左组件或上组件的绝对宽或高,小于1
代表右组件或下组件的绝对宽或高
分割组件类ht.widget.SplitView
主要可配置属性和函数如下:
getLeftView()
和setLeftView(view)
获取和设置左组件或上组件getRightView()
和setRightView(view)
获取和设置右组件或下组件getOrientation()
和setOrientation()
获取和设置子组件摆放方向,水平摆放horizontal
或h
,垂直摆放vertical
或v
getPosition()
和setPosition(position)
获取和设置分割位置,默认值为0.5
,如果设置值为0~1
则按百分比分割,大于1
代表左组件或上组件的绝对宽或高,小于0
代表右组件或下组件的绝对宽或高getDividerSize()
和setDividerSize(size)
获取和设置分隔条大小getDividerBackground()
和setDividerBackground(background)
获取和设置分隔条背景色大小getDragOpacity()
和setDragOpacity(opacity)
获取和设置分隔条拖拽时透明度,默认值为0.5
,可取值为0~1
isDraggable()
和setDraggable(true)
获取和设置是否允许分隔条拖拽,默认为true
isTogglable()
和setTogglable(false)
获取和设置分割点是否可通过点击直接展开和关闭,默认为true
getToggleIcon()
和setToggleIcon(icon)
获取和设置分隔条上的toggle
图标,该参数需要设置为矢量格式getStatus
和setStatus(normal/cl/cr)
获取和设置toggle
状态normal
代表中间分割状态cl
代表collapse left
关闭左组件或上组件cr
代表collapse right
关闭右组件或下组件以上例子以div
作为子组件,通过div.style.position = 'absolute'
设置了绝对定位属性,
由于该子组件设置了div.style.border = '10px solid yellow'
边框,因此需要将box-sizing
属性设置为border-box
。
function createDiv(background){
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.background = background;
div.style.border = '10px solid yellow';
div.style.setProperty('box-sizing', 'border-box', null);
return div;
}
上组件topView
由左右两个div
子组件构成,h
代表horizontal
水平摆放,0.3
代表左组件占30%
,右组件占70%
空间
topView = new ht.widget.SplitView(createDiv('#1ABC9C'), createDiv('#9B59B6'), 'h', 0.3);
下组件bottomView
也是左右分割两个div
组件,但position
设置的100
值,代表左边组件占用绝对值100
的空间
bottomView = new ht.widget.SplitView(createDiv('#34495E'), createDiv('#E74C3C'), 'h', 100);
整体组件由topView
和bottomView
垂直摆布构成,v
代表vertical
垂直摆放,-100
代表下组件占用绝对值100
的空间
mainView = new ht.widget.SplitView(topView, bottomView, 'v', -100);
通过topView.setDividerSize(8)
加粗分隔条,通过topView.setDividerBackground('#EEEEEE')
改变分隔条背景。
topView.setDividerSize(8);
topView.setDividerBackground('#EEEEEE');
通过bottomView.setTogglable(false)
关闭toggle
功能,通过bottomView.setDraggable(false);
关闭分隔条拉动功能。
bottomView.setDividerSize(2);
bottomView.setDividerBackground('#EEEEEE');
bottomView.setTogglable(false);
bottomView.setDraggable(false);
通过mainView.setTogglable(false)
关闭toggle
功能,只保留分割条拉动功能。
mainView.setDividerSize(8);
mainView.setDividerBackground('#EEEEEE');
mainView.setTogglable(false);
通过定义子组件的onLayouted
函数可监听SplitView
对子组件的布局事件。
div.onLayouted = function(x, y, width, height){
div.innerHTML = 'width:' + width + ' height:' + height;
};