Index
The HT for Web
provides a tab component class ht.widget.TabView
, which renders multiple components in the form of a tab, tab supports for drag-and-drop and close features, the view component of the tab corresponds to the components for the HT
framework, or HTML
native components, subcomponent set position
to absolute
for absolute positioning.
Each TabView
component object is built with a tabview.getTabModel()
tab model container, and the tab model container is ht.dataModel
type, can be deleted from the model container ht.Tab
type page sign object, ht.Tab
object stores information such as the view, text, and icon for the tab.
The selection of the tab is actually the control of the SelectionModel
selection model for the tabView.getTabModel()
container, which allows you to add listening and control options to the selected model, but TabView
provides a more direct function interface, most of the cases without the SelectionModel
.
ht.Tab
tab type has the following tab-related property functions:
getView()
and setView(view)
Gets and sets the view components that are rendered when the tab is checkedisClosable()
and setClosable(true/false)
Gets and sets whether the page check can be closed, close the top right corner of the page will have a fork to close the operation, the default is false
isDisabled()
and setDisable(true/false)
Sets tab to be selected and closed, the default is false
Tab component class ht.widget.TabView
main configurable properties and functions are as follows:
isDisabled()
and setDisabled(true/false, iconURL)
Gets and sets the entire component in an unusable stategetLabel(tab)
Gets the content of the tab, defaults to return tab.toLabel()
, can be overloaded with customgetLabelFont(tab)
Gets the tab font, which can be overloaded with customgetLabelColor(tab)
and setLabelColor(color)
Gets and sets the tab text color, which can be overloaded with customgetTabModel()
Gets Tab
model container of DataModel
type built-in TabView
, for adding and removing Tab
getCurrentTab()
Gets the selected tab objectonTabChanged(oldTab, newTab)
Called when the selected Tab
object changes, can be overloaded to do subsequent processingonTabClosed(tab, index)
Close Tab
callback function, index
is the index of the close page, the default processing selects the previous tabget(nameOrIndex)
Gets the specified Tab
object, the parameter can be Tab's
the label text or indexremove(tabOrIndex)
Deletes the specified Tab
page, the parameter can be Tab
object, or an index of an integer type, or a tab textselect(tabOrIndex)
Select the specified Tab
page, the parameter can be Tab
, or an index of an integer type, or a tab textadd(name, view, selected)
Adds a tab, which builds the Tab
object, adds it to tabModel
, and returns the Tab
object functionisMovable()
and setMovable(true)
Gets and sets whether the tab can be dragged and moved to change the display order, the default value is true
getTabGap()
and setTagGap(1)
Gets and sets the tab gap, the default value is 1
getTabHeight()
and setTabHeight(24)
Gets and sets the tab heightgetTabPosition()
and setTabPosition('top')
Gets and sets the tab location, optional top
、bottom
、left
、right
、left-vertical
、right-vertical
default value is top
getTabBackground()
and setTabBackground(color)
Gets and sets the background color of the tabgetSelectBackground()
and setSelectBackground(color)
Gets and sets the tab selected line background colorgetSelectWidth()
and setSelectWidth(3)
Gets and sets the line width of the tab, and the default value is 3
getMoveBackground()
and setMoveBackground(color)
Gets and sets the background color of the tab when movinggetInsertColor()
and setInsertColor(color)
Gets and sets move hint insert position colorThe example creates two TabView
objects with the tabPosition
position top
and bottom
function init(){
tabView1 = createTabView();
tabView2 = createTabView();
splitView = new ht.widget.SplitView(tabView1, tabView2, 'v');
tabView1.setTabPosition('right-vertical');
tabView2.setTabPosition('bottom');
tabView2.select('SUN FLOWER');
view = splitView.getView();
view.className = 'main';
document.body.appendChild(view);
window.addEventListener('resize', function (e) {
splitView.invalidate();
}, false);
}
function createTabView(){
var tabView = new ht.widget.TabView();
tabView.setSelectBackground('#D26911');
tabView.setTabBackground('#F5F5F5');
tabView.setLabelColor('#333333');
add(tabView, 'TURQUOISE', '#1ABC9C').setDisabled(true);
add(tabView, 'PETER RIVER', '#3498DB', true).setIcon('search');
add(tabView, 'AMETHYST', '#9B59B6');
add(tabView, 'WET ASPHALT', '#34495E').setClosable(true);
add(tabView, 'SUN FLOWER', '#F1C40F');
add(tabView, 'CLOUDS', '#ECF0F1').setIcon('edit');
add(tabView, 'ALIZARIN', '#E74C3C').setIcon('settings');
return tabView;
}
function add(tabView, name, color, selected){
// create view
var div = document.createElement('div');
div.style.background = color;
// create tab
var tab = new ht.Tab();
tab.setName(name);
tab.setView(div);
// add to model
var tabModel = tabView.getTabModel();
tabModel.add(tab);
if(selected){
tabModel.getSelectionModel().setSelection(tab);
}
return tab;
}