HT for Web 分割组件手册

索引


概述

HT for Web提供了分割组件类ht.widget.SplitView,分割组件用于左右或上下分割两个子组件, 子组件可为HT框架提供的组件,也可为HTML的原生组件,子组件以positionabsolute方式进行绝对定位。

分割组件

通过splitView = new ht.widget.SplitView(leftView, rightView, orientation, position);初始化构建一个分割组件对象。 leftView左组件或上组件 rightView右组件或下组件 orientation字符串类型,默认为horizontalh代表左右分割,可设为verticalv代表上下分割 position分割位置,默认值为0.5,如果设置值为0~1则按百分比分割,大于1代表左组件或上组件的绝对宽或高,小于1代表右组件或下组件的绝对宽或高

分割组件类ht.widget.SplitView主要可配置属性和函数如下:

以上例子以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);

整体组件由topViewbottomView垂直摆布构成,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