Skip to end of metadata
Go to start of metadata

效果预览

其中上面的页头叫TabBar:

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

其它特性说明

导航按钮

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

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

js动态设置参考代码:

菜单按钮

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

js动态设置参考代码:

标签页位置设置

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

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

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

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

标签页右键菜单

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

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

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

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

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

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

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

beforeTabChange与onTabChange事件

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

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

关闭指定标签页

JS参考代码:

动态添加标签页

js参考代码:

XML定义标签页办法

在TabControl中添加ControlTab子节点,范例如下:

IDE视图:

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

  • ControlTab
  • IFrameTab

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

IDE视图:

有关ControlTab和IFrameTab更详细的内容参考对应的控件说明:

参考范例

参考范例:http://bsdn.org/projects/dorado7/deploy/sample-center/com.bstek.dorado.sample.Main.d#115650

对应的说明文档:http://wiki.bsdn.org/pages/viewpage.action?pageId=10354941

Labels
  • No labels