分割组件手册 - HT for Web

HT for Web 分割组件手册

索引

概述
分割组件

概述

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;
};

欢迎交流 service@hightopo.com