Index

• Overview
• Tab
• TabView

Overview

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.

Tab

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 checked
• isClosable() 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

TabView

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 state
• getLabel(tab) Gets the content of the tab, defaults to return tab.toLabel(), can be overloaded with custom
• getLabelFont(tab) Gets the tab font, which can be overloaded with custom
• getLabelColor(tab) and setLabelColor(color) Gets and sets the tab text color, which can be overloaded with custom
• getTabModel() Gets Tab model container of DataModel type built-in TabView, for adding and removing Tab
• getCurrentTab() Gets the selected tab object
• onTabChanged(oldTab, newTab) Called when the selected Tab object changes, can be overloaded to do subsequent processing
• onTabClosed(tab, index) Close Tab callback function, index is the index of the close page, the default processing selects the previous tab
• get(nameOrIndex) Gets the specified Tab object, the parameter can be Tab's the label text or index
• remove(tabOrIndex) Deletes the specified Tab page, the parameter can be Tab object, or an index of an integer type, or a tab text
• select(tabOrIndex) Select the specified Tab page, the parameter can be Tab, or an index of an integer type, or a tab text
• add(name, view, selected) Adds a tab, which builds the Tab object, adds it to tabModel, and returns the Tab object function
• isMovable() 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 height
• getTabPosition() 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 tab
• getSelectBackground() and setSelectBackground(color) Gets and sets the tab selected line background color
• getSelectWidth() 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 moving
• getInsertColor() and setInsertColor(color) Gets and sets move hint insert position color

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