效果预览

其中上面的页头叫TabBar：

TabBar的详情请参考：TabBar(DCUG)

其它特性说明

导航按钮

如果标签页数不够多而不需要导航按钮时，默认隐藏。

如果希望一直显示，可以通过设置alwaysShowNavButtons属性实现：

js动态设置参考代码：

var alwaysShowNavButtons = tabControl.get("alwaysShowNavButtons");
tabControl.set("alwaysShowNavButtons", (alwaysShowNavButtons) ? false : true)

菜单按钮

如果想要关闭菜单按钮的功能，可以设定TabBar的showMenuButton为false实现：

js动态设置参考代码：

var showMenuButton = tabControl.get("showMenuButton");
tabControl.set("showMenuButton", (showMenuButton) ? false : true)

标签页位置设置

默认标签页是在顶端显示的，我们也可以通过tabPlacement属性设置其在下面显示：

通过JS动态设置tabPlacement的方法：

var tabPlacement = tabControl.get("tabPlacement");
tabControl.set("tabPlacement", (tabPlacement=="top") ? "bottom" : "top");

如果还希望将标签页设置到左边或右边，如下的效果：

则请使用VerticalTabControl控件(TabBar控件无法实现标签页居左或居右的效果，需要改为VerticalTabControl控件),详细使用参考:VerticalTabControl

标签页右键菜单

如果我们想在标签页上右键单击的时候显示一个菜单，效果如下：

则可以通过TabControl的onTabContextMenu事件实现，首先在页面中创建一个Menu对象，之后在这个事件中编写如下代码：

view.get("#menuXXX").show({
	event: arg.event
});

通过JS动态设置当前标签页

TabControl提供了currentTab属性用于获取或存取当前显示的控件，如：

var currentTab = cardBook.get("currentTab");//获取TabControl控件当前显示的Tab对象
currentTab.set("currentTab", tabDept);//将TabControl控件中的tabDept控件设置为当前可见的Tab

另外所有的控件都按照添加到TabControl中的顺序有一个顺序号。这样你就可以通过TabControl提供的currentIndex属性获取或动态设置当前可见的控件，如：

tabControl.set("currentIndex", 2);//将卡片簿中序号为2的控件设置为当前可见的控件

注意：默认的序号是从0开始的

另外当我们通过鼠标操作或JS代码，最终导致currentTab和currentIndex属性发生变化的时候都会触发TabControl的beforeTabChange和onTabChange事件。

beforeTabChange与onTabChange事件

TabBar控件的当前标签页对象如果发生变化，则会触发其beforeTabChange与onTabChange事件，他们都提供了arg.newTab和arg.oldTab参数，分别代表了当前的Tab和要切换到的Tab对象。

dorado.MessageBox.alert(arg.oldTab.get("caption"));
dorado.MessageBox.alert(arg.newTab.get("caption"));

其中在beforeTabChange事件中我们还可以利用其arg.processDefault禁止默认的切换动作，范例代码：

if (arg.newTab.get("caption")=="控件"){
	arg.processDefault = false;
}

关闭指定标签页

JS参考代码：

var tab = tabControl.get("currentTab");
if (tab) {
	tab.close();
}

动态添加标签页

js参考代码：

tabControl.addTab({
	$type : "IFrame",
	caption : "NewTab",
	closeable : true,
	path : "http://www.bsdn.org"
});

XML定义标签页办法

在TabControl中添加ControlTab子节点，范例如下：

    <TabControl>
      <ControlTab>
        <Property name="caption">标签1</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签2</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签3</Property>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签4</Property>
      </ControlTab>
    </TabControl>

IDE视图：

TabControl中支持两种常用的Tab对象：

ControlTab
IFrameTab

其中ControlTab是一个控件容器，可以在内部添加子控件对象，IFrameTab用于指向另一个URL的视图，范例XML：

    <TabControl>
      <ControlTab>
        <Property name="caption">标签1</Property>
        <Container>
          <Button>
            <Property name="caption">按钮1</Property>
          </Button>
          <Button>
            <Property name="caption">按钮2</Property>
          </Button>
          <Button>
            <Property name="caption">按钮3</Property>
          </Button>
          <Button>
            <Property name="caption">按钮4</Property>
          </Button>
          <Button>
            <Property name="caption">按钮5</Property>
          </Button>
        </Container>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签2</Property>
        <Grid/>
      </ControlTab>
      <ControlTab>
        <Property name="caption">标签3</Property>
        <AutoForm/>
      </ControlTab>
      <IFrameTab>
        <Property name="caption">标签4</Property>
        <Property name="path">http://www.bsdn.org</Property>
      </IFrameTab>
    </TabControl>