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