HT for Web 页签组件手册

索引


概述

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

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

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

页签

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

页签组件

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

示例中创建了tabPosition位置分别为topbottom的两个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;
} 

欢迎交流 service@hightopo.com