索引

• 概述
• 页签
• 页签组件

概述

HT for Web提供了页签组件类ht.widget.TabView，以页签的方式呈现多组件，页签支持拖拽和关闭等功能， 页签对应的视图组件可为HT框架提供的组件，也可为HTML原生组件，子组件以position为absolute方式进行绝对定位。

每个TabView组件对象内置了一个tabView.getTabModel()页签模型容器，页签模型容器为ht.DataModel类型， 可对该模型容器增删ht.Tab类型页签对象，ht.Tab对象存储着页签对应的视图、文本和图标等信息。

页签的选中实际就是对tabView.getTabModel()容器对应的SelectionModel选中模型的控制， 可对选中模型添加监听和控制选择，但TabView提供了更直接的函数接口，大部分情况下无需与SelectionModel打交道。

页签

ht.Tab页签类型具有以下页签相关属性函数：

• getView()和setView(view)获取和设置页签被选中时呈现的视图组件
• isClosable()和setClosable(true/false)获取和设置页签是否可关闭，可关闭页签右上角会有叉号可进行关闭操作，默认为false
• isDisabled()和setDisabled(true/false)获取和设置页签是否可选中和关闭，默认为false

页签组件

页签组件类ht.widget.TabView主要可配置属性和函数如下：

• isDisabled()和setDisabled(true/false, iconURL)获取和设置整个组件处于不可用状态
• getLabel(tab)获取页签文字内容，默认返回tab.toLabel()，可重载自定义
• getLabelFont(tab)获取页签文字字体，可重载自定义
• getLabelColor(tab)和setLabelColor(color)获取和设置页签文字颜色，可重载自定义
• getTabModel()获取TabView组件内置了DataModel类型的Tab模型容器，用于增删Tab页签
• getCurrentTab()获取当前选中显示的Tab对象
• onTabChanged(oldTab, newTab)当前选中Tab对象变化时回调，可重载做后续处理
• onTabClosed(tab, index)关闭Tab页签回调函数，index为关闭页签所在索引，默认处理会选中上一个页签
• get(nameOrIndex)获取指定的Tab对象，参数可为Tab的标签文字或索引
• remove(tabOrIndex)删除指定的Tab页，参数可为Tab对象，或整数类型的索引，或页签文字
• select(tabOrIndex)选中指定的Tab页，参数可为Tab对象，或整数类型的索引，或页签文字
• add(name, view, selected)添加页签，该函数构建了Tab对象，添加到tabModel中，并将Tab对象函数返回
• isMovable()和setMovable(true)获取和设置页签是否可拖拽移动改变显示顺序，默认值为true
• getTabGap()和setTabGap(1)获取和设置页签间隔，默认值为1
• getTabHeight()和setTabHeight(24)获取和设置页签高度
• getTabPosition()和setTabPosition('top')获取和设置页签位置，可取值为top、bottom、left、right、left-vertical、right-vertical默认值为top
• getTabBackground()和setTabBackground(color)获取和设置页签背景色
• getSelectBackground()和setSelectBackground(color)获取和设置页签选中线条背景色
• getSelectWidth()和setSelectWidth(3)获取和设置页签选中的线条宽度，默认值为3
• getMoveBackground()和setMoveBackground(color)获取和设置移动时的页签背景色
• getInsertColor()和setInsertColor(color)获取和设置移动提示插入位置颜色

示例中创建了tabPosition位置分别为top和bottom的两个TabView对象

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