您现在的位置是：网站首页> 编程资料编程资料

Flex中TabNavigator设置Tabs样式思路及源码_Flex_

2023-05-25 275人已围观

简介 Flex中TabNavigator设置Tabs样式思路及源码_Flex_

1、设计思路

（1）设计一个TabNavigator，其中包含两个Tabs；

（2）设置Tabs样式

2、设计源码

Tabs.mxml：

xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
width="100%" height="100%" 
>











@namespace s "library://ns.adobe.com/flex/spark"; 
@namespace mx "library://ns.adobe.com/flex/mx"; 
.myTabs{ 
color:#FFFFFF; 
font-weight:bold; 
background-color:#6495ED; 
} 
.myTextTabs{ 
color:#8B0000; 
background-color:#97FFFF; 
font-weight:bold; 
} 
mx|TabNavigator{ 
tab-style-name:"myTabs"; 
first-tab-style-name:"myTabs"; 
last-tab-style-name:"myTabs"; 
selected-tab-text-style-name:"myTextTabs"; 
} 



import mx.collections.ArrayCollection; 

[Bindable] 
//学生数据绑定 
private var studentArray:ArrayCollection = new ArrayCollection([ 
{sno:"2013010101",math:"96"}, 
{sno:"2013010102",math:"89"}, 
{sno:"2013010103",math:"87"}, 
{sno:"2013010104",math:"90"}, 
{sno:"2013010105",math:"78"}, 
{sno:"2013010106",math:"69"}, 
{sno:"2013010107",math:"92"}, 
{sno:"2013010108",math:"80"}, 
{sno:"2013010109",math:"60"}, 
{sno:"2013010110",math:"89"} 
]); 

[Bindable] 
//教师数据绑定 
private var teacherArray:ArrayCollection = new ArrayCollection([ 
{tno:"2013010101",tscore:"96"}, 
{tno:"2013010102",tscore:"99"}, 
{tno:"2013010103",tscore:"77"}, 
{tno:"2013010104",tscore:"70"}, 
{tno:"2013010105",tscore:"98"}, 
{tno:"2013010106",tscore:"79"}, 
{tno:"2013010107",tscore:"82"}, 
{tno:"2013010108",tscore:"70"}, 
{tno:"2013010109",tscore:"80"}, 
{tno:"2013010110",tscore:"79"} 
]); 
]]>

3、设计说明

（1）tab-style-name：设置所有tabs的样式类

（2）first-tab-style-name：设置第一个tabs的样式类

（3）last-tab-style-name：设置最后一个tabs的样式类

（4）selected-tab-text-style-name：设置选中的tabs中的text样式类

4、设计结果

（1）初始化时结果

（2）切换tabs

您可能感兴趣的文章:

上一篇：Flex弹出窗口请求Action函数示例_Flex_

下一篇：Flex文件读取报错示例_Flex_

您现在的位置是：网站首页> 编程资料编程资料

Flex中TabNavigator设置Tabs样式思路及源码_Flex_

相关内容

点击排行

本栏推荐

猜你喜欢