Index

• Overview
• SplitView Comoponent

Overview

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:

• getLeftVeiw() and setLeftView(view) Gets and sets the left component or the upper component
• getRightVeiw() and setRightView(view) Gets and sets the right component or the lower component
• getOrientation() and setOrientation() Gets and sets the direction of the subcomponent, horizontally placing horizontal or h, vertically placing vertical or v
• getPosition() and setPosition(position) Gets and sets the split position, the default is 0.5, if the set value is 0~1 is divided 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
• getDividerSize() and setDividerSize(size) Gets and sets the divider bar size
• getDividerBackground() and setDividerBackground(background) Gets and sets the divider bar background color
• getDragOpacity() and setDragOpacity(opacity) Gets and sets the divider when the bar is dragged, the default is 0.5, and the optioanl value is 0~1
• isDraggable() and setDraggable(true) Gets and sets whether to allow separator bars to be dragged, the default is true
• isTogglable() and setTogglable(false) Gets and sets whether the split point can be expanded and closed by clicking directly, the default is true
• getToggleIcon() and setToggleIcon(icon) Gets and sets the toggle icon on the separator bar, which needs to be set to vector format
• getStatus and setStatus(normal/cl/cr) Gets and sets toggle status
  • normal Represents the center split state
  • cl Stands for collapse.left to close the left or upper components
  • cr Stands for collapse.left to close the right or lower components

The above example uses div as subcomponent, through div.style.position = 'absolute' to set an absolute positioning property, because the subcomponent sets the div.style.border = '10px solid yellow' border, So you need to set the box-sizing property to 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;
}

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.

topView.setDividerSize(8);
topView.setDividerBackground('#EEEEEE');

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

bottomView.setDividerSize(2);
bottomView.setDividerBackground('#EEEEEE');
bottomView.setTogglable(false);
bottomView.setDraggable(false);

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

mainView.setDividerSize(8);
mainView.setDividerBackground('#EEEEEE');
mainView.setTogglable(false);

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