Skip to end of metadata
Go to start of metadata
 

简述

TabControl可以实现多标签页的效果。

TabControl本身是一个多页标签的容器,为了实现多页标签效果,需要为其添加子控件实现。可添加到子控件包括:ControlTab,IFrameTab,Tab

创建视图

在sample.chapter02下新建一个视图,并命名为:"TabControl",在视图中通过Dorado7 ToolBox找到TabControl控件,并添加到View节点下:

添加ControlTab

选择TaControl节点,并通过Dorado7 ToolBox找到ControlTab控件对象,添加到TabControl节点下,我们直接增加三个ControlTab控件对象。

ControlTab是面板标签页的一种,是一种容器型的控件,可以在内部添加其他Dorado7控件对象,作为标签页的内容。

保存后打开如下的URL:

查看页面效果:

浏览器中我们可以看到已经添加了3个标签页,它们都没有内容。

下面我们进一步对三个ControlTab的caption属性进行设定:

其中

控件属性描述
controlTab1captiontab1设置tab的标题
controlTab2captiontab2 
controlTab3captiontab3 

设置后之后保存当前视图,刷新刚才的页面:

可以看到标签页的标题已经设定好。

ControlTab本身是容器控件,它允许我们在内部添加子控件对象,我们以Label控件为例,选择不同的ControlTab控件,分别在内部添加一个Label控件对象,如下图:

其中的label的text属性,分别设置为1,2,3,最后我们刷新浏览器中的页面可以看到如下的效果图:

添加IFrameTab

IFrameTab控件允许Tab标签页直接将一个URL作为其内部的显示内容。下面我们在当前范例中添加IFrameTab。

选择TabControl控件节点,并在Dorado7 ToolBox中找到IFrameTab控件对象,双击将它添加到TabControl中:

选择IFrameTab控件,并编辑其caption属性为:"tab4":

保存后刷新页面,查看效果,已经添加第4个标签页,但是并没有内容。

IFrameTab通过path属性定义内部页面:

如上图,我们将path定义到锐客网主网址: http://bsdn.org

保存以上视图的修改后,我们刷新浏览器中当前页面,并切换到tab4标签页上之后可以看到其内容已经变成锐客网的内容了:

设定ControlTab或IFrameTab标签页属性

标签页比较常用的属性包括:

  • caption 标题属性
  • closeable 显示关闭按钮
  • disabled 是否可用

其它属性可以通过Client API查询。

在上面的说明中我们知道了caption属性的基本用法,下面我们再来了解closeable和disabled属性的用法。

我们设定controlTab2的disabled属性为true:

设定controlTab3的closeable属性为true:

保存当前的视图,并刷新浏览器中的当前页面,我们可以看到其中第二个标签页已经无法点击,第三个标签页上多出了关闭快捷图标。

设定TabControl属性

最后我们再来了解主控件TabControl的几个基本属性:

  • tabPlacment 标签页签的显示位置
  • tabMinWidth 标签页签的最小宽度
  • currentTab 当前默认的标签页
  • showMenuButton 显示菜单按钮

其它属性可以通过Client API查询。

tabPlacement

首先我们可以设置TabControl的tabPlacement属性,它支持top和bottom两种设置,默认为top,就是我们看到的标签页的页头在最上面,如果我们将它调整为bottom之后:

得到的页面效果为:

在上图中我们可以看到标签页的页头已经放置在最下面了。

注意: 首先我们将TabControl中的tabPlacement属性恢复为"top",再继续下面其它属性的讲解。

tabMinWidth

tabMinWidth是用于控制标签页页头标题的最小宽度,如本例我们将tabMinWidth设置为150:

则得到的最终页面效果图为:

上图中我们可以看出每个标签页的宽度都被拉长了。

currentTab

该属性是用于当我们希望打开页面时,将当前标签页自动切换定位到某一个具体的标签页上,而不是默认永远定位在第一个标签页上。如我们设置currentTab为2:

则刷新浏览器中的当前视图:

我们可以看到系统会自动定位到第三个标签页上。

currentTab的默认计数从0开始

showMenuButton

另外,当页面上标签页比较多时,TabControl控件会自动提供导航按钮,如下图红框内:

单击红框中的按钮标签页会自动的向右移:

上图中我们可以看到标签右移的效果,tab5原来是不可见的。同时我们还可以看到左侧的导航按钮也被激活,如果单击会回到最前面的页面视图的效果。

这样TabControl中当标签页比较多时,我们就可以通过这儿提供的导航按钮定位到相关的标签页上。

另外为了使用上的方便,还提供的导航菜单功能,如我们设置TabControl的showMenuButton属性为true:

则保存,并刷新浏览器中的当前视图后,我们可以在下图中看到红框中的快捷按钮图标:

单击这个图标:

可以看到所有的标签页都已菜单的形式展现出来,这样方便我们选取其中的一个标签页进行快速定位。


Labels
  • No labels