HT for Web SplitView Manual



The HT for Web provides a split component class ht.widget.SplitView, the split component is used to split two of subcomponents left and right or up and down, subcomponents can be components provided in HT framework, or html native components, subcomponents set position to absolute for absolute positioning.

SplitView Comoponent

Through splitView = new ht.widget.SplitView(leftView, rightView, orientation, position); initialize build a split component object. leftView Left or upper components rightView right or lower components orientation String type, the default is horizontal or h represents left and right split, can be set to vertical or v represents up and down split position Division position, the default is 0.5, if set value is 0~1 then split by percent, greater than 1 represents the absolute width or height of the left component or the upper component, less than 1 represents the absolute width or height of the right component or the lower component

Split component class ht.widget.SplitView main configurable properties and functions are as follows:

The above example uses div as subcomponent, through = 'absolute' to set an absolute positioning property, because the subcomponent sets the = '10px solid yellow' border, So you need to set the box-sizing property to border-box.

function createDiv(background){
    var div = document.createElement('div'); = 'absolute';            = background; = '10px solid yellow';           'box-sizing', 'border-box', null);
    return div;

The upper component topView consists of about two div subcomponents, h stands for horizontal level, 0.3 represents 30% for left components, and right components occupy 70% space

topView = new ht.widget.SplitView(createDiv('#1ABC9C'), createDiv('#9B59B6'), 'h', 0.3);

The lower component bottomView is also split to left and right two div components, but position set to value 100, representing the left component occupying the absolute value 100 space

bottomView = new ht.widget.SplitView(createDiv('#34495E'), createDiv('#E74C3C'), 'h', 100);

The whole component is composed of topView and bottomView, v represents vertical vertically, -100 represents the next component occupied 100 space

mainView = new ht.widget.SplitView(topView, bottomView, 'v', -100);

By the topView.setDividerSize(8) to bold divider bar, through the topView.setDividerBackground('#EEEEEE') change the divider bar background.


By bottomView.setTogglable(false) to close the toggle feature, through bottomView.setDraggable(false); to turn off the divider bar pull feature.


By mainView.setTogglable(false) to close the toggle feature, only the split bar pull feature is preserved.


By defining the onLayouted function of the subcomponent, you can listen the layout events of the SplitView subcomponent.

div.onLayouted = function(x, y, width, height){
    div.innerHTML = 'width:' + width + ' height:' + height;

Welcome to contact us