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

1、设计思路

(1)设计一个TabNavigator,其中包含两个Tabs;

(2)设置Tabs样式

2、设计源码

Tabs.mxml:


代码如下:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
>
<fx:Declarations>
<!-- Define custom colors for use as fills. -->
<mx:SolidColor id="sc1" color="0xADFF2F" alpha=".8"/>
<mx:SolidColor id="sc2" color="0xADD8E6" alpha=".6"/>

<!-- Define custom Strokes for the columns. -->
<mx:SolidColorStroke id="s1" color="0xADFF2F" weight="2"/>
<mx:SolidColorStroke id="s2" color="0xADD8E6" weight="2"/>
</fx:Declarations>

<fx:Style>
@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";
}
</fx:Style>

<fx:Script>
<![CDATA[
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"}
]);
]]>
</fx:Script>

<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:TabNavigator width="100%" height="100%" fontSize="12" cornerRadius="8">
<s:NavigatorContent label="学生" width="100%" height="100%">
<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:ColumnChart id="column" dataProvider="{studentArray}" showDataTips="true" width="100%" height="100%" fontSize="12">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="sno" displayName="学号"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries displayName="数学成绩" xField="sno" yField="math" fill="{sc1}" stroke="{s1}"/>
</mx:series>
</mx:ColumnChart>
<mx:HBox width="100%" height="30">
<s:Label width="50%"/>
<mx:Legend dataProvider="{column}"/>
</mx:HBox>
</mx:VBox>

</s:NavigatorContent>
<s:NavigatorContent label="教师" width="100%" height="100%" fontSize="12">
<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:ColumnChart id="column1" dataProvider="{teacherArray}" showDataTips="true" width="100%" height="100%" fontSize="12">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="tno" displayName="工号"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries displayName="教师评分" xField="tno" yField="tscore" fill="{sc2}" stroke="{s2}"/>
</mx:series>
</mx:ColumnChart>
<mx:HBox width="100%" height="30">
<s:Label width="50%"/>
<mx:Legend dataProvider="{column1}"/>
</mx:HBox>
</mx:VBox>
</s:NavigatorContent>
</mx:TabNavigator>
</mx:VBox>
</s:Application>

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

(0)

相关推荐

  • BOM之navigator对象和用户代理检测

    前面的话 navigator对象现在已经成为识别客户端浏览器的事实标准,navigator对象是所有支持javascript的浏览器所共有的.本文将详细介绍navigator对象和用户代理检测 属性 与其他BOM对象的情况一样,每个浏览器中的navigator对象也都有一套自己的属性.下表列出了存在于所有浏览器中的属性和方法,以及支持它们的浏览器版本 属性                                              说明 appCodeName           

  • javascript学习随笔(编写浏览器脚本 Navigator Scripting )

    在 HTML 中使用JavaScript JavaScript能以两种方式嵌入HTML: 作为语句和函数使用时,用 SCRIPT 标记 作为事件处理程序使用时,用 HTML 标记 SCRIPT 标记 使用SCRIPT标记把脚本嵌入在HTML中,格式如舷: <SCRIPT> _ JavaScript 语句</SCRIPT> LANGUAGE属性作为可选项,用于指定脚本语言,用法如下: <SCRIPT LANGUAGE="JavaScript"> _Ja

  • 微信小程序 navigator 组件实例详解

    navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指定. 主要属性: wxml <navigator url="../index/index">点击跳转不关闭当前页面</navigator> <navigator url="../logs/logs" redirect="true" >点击跳转关闭当前页面</navigator> 相关文章: hello

  • javascript宿主对象之window.navigator详解

    window.navigator用来反映浏览器及其功能信息的对象. // 检测浏览器版本信息 function getBrowserInfo(){ var Sys = {}; var ua = window.navigator.userAgent.toLowerCase(); var re =/(msie|firefox|chrome|opera|version).*?([\d.]+)/; var m = ua.match(re); Sys.browser = m[1].replace(/ver

  • JS判断浏览器之Navigator对象

    The Navigator Object 导航对象 The JavaScript Navigator object contains all information about the visitor's browser. We are going to look at two properties of the Navigator object: JS导航对象包含所有有关访问这者浏览器的信息.我们将看看两个导航对象的产物: appName -  holds the name of the br

  • javascript通过navigator.userAgent识别各种浏览器

    原理:根据navigator.userAgent返回值识别 实现: 复制代码 代码如下: function validBrowser(){ var u_agent = navigator.userAgent; var browser_name='Failed to identify the browser'; if(u_agent.indexOf('Firefox')>-1){ browser_name='Firefox'; }else if(u_agent.indexOf('Chrome')>

  • JavaScript中的Navigator浏览器对象

    navigator 浏览器对象,包含了正在使用的 Navigator 的版本信息.反映了当前使用的浏览器的资料.JavaScript 客户端运行时刻引擎自动创建 navigator 对象. 更详细的信息可以去查msdn或者Navigator 2.0以后的说明文档,这里我们之做个简单的说明 包括一下几大属性: appCodeName 返回浏览器的"码名"(?),流行的 IE 和 NN 都返回 'Mozilla'. 下面的例子显示了 appCodeName 属性的值: document.w

  • 微信小程序 wxapp导航 navigator详解

    微信小程序 wxapp导航 navigator 最近微信小程序非常火,朋友圈,微博,论坛等地方都在刷屏,因为这是搞前端的春天,前端工程师可以赚一把了,所以业余就学习了微信小程序的知识,这里记录下 : navigator 属性名 类型 默认值 说明 url String   应用内的跳转链接 redirect Boolean false 是否关闭当前页面 hover-class String navigator-hover 指定点击时的样式类,当hover-class="none"时,没

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

    1.设计思路 (1)设计一个TabNavigator,其中包含两个Tabs: (2)设置Tabs样式 2.设计源码 Tabs.mxml: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex

  • Java编程删除链表中重复的节点问题解决思路及源码分享

    一. 题目 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 二. 例子 输入链表:1->2->3->3->4->4->5 处理后为:1->2->5 三. 思路 个人感觉这题关键是注意指针的指向,可以定义一个first对象(值为-1,主要用于返回操作后的链表),first.next指向head,定义一个last同样指向first(主要用于操作记录要删除节点的前一个节点),定义一个p指向head,指向当前节点.

  • Flex父子窗口相互调用实现思路及源码

    1.设计思路 (1)子窗口调用父窗口的方法 (2)子窗口做了修改后,返回父窗口,父窗口调用子窗口函数 2.设计源码 (1)父窗口 ParentWindow.mxml: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns

  • Android中图片压缩方案详解及源码下载

    Android中图片压缩方案详解及源码下载 图片的展示可以说在我们任何一个应用中都避免不了,可是大量的图片就会出现很多的问题,比如加载大图片或者多图时的OOM问题,可以移步到Android高效加载大图及多图避免程序OOM.还有一个问题就是图片的上传下载问题,往往我们都喜欢图片既清楚又占的内存小,也就是尽可能少的耗费我们的流量,这就是我今天所要讲述的问题:图片的压缩方案的详解. 1.质量压缩法 设置bitmap options属性,降低图片的质量,像素不会减少 第一个参数为需要压缩的bitmap图

  • 深入理解Python虚拟机中复数(complex)的实现原理及源码剖析

    目录 复数数据结构 复数的操作 复数加法 复数取反 Repr 函数 总结 复数数据结构 在 cpython 当中对于复数的数据结构实现如下所示: typedef struct { double real; double imag; } Py_complex; #define PyObject_HEAD PyObject ob_base; typedef struct { PyObject_HEAD Py_complex cval; } PyComplexObject; typedef struc

  • java向文件中追加内容与读写文件内容源码实例代码

    java向文件中追加内容与读写文件内容源码实例代码 向文件尾加入内容有多种方法,常见的方法有两种: RandomAccessFile类可以实现随机访问文件的功能,可以以读写方式打开文件夹的输出流 public void seek(long pos)可以将读写指针移到文件尾,参数Pos表示从文件开头以字节为单位测量的偏移位置,在该位置文件指针. public void write(int pos)将数据写到读写指针后面,完成文件的追加.参数pos表示要写入的Byte 通过FileWrite打开文件

  • Python中getpass模块无回显输入源码解析

    本文主要讨论了python中getpass模块的相关内容,具体如下. getpass模块 昨天跟学弟吹牛b安利Python标准库官方文档的时候偶然发现了这个模块.仔细一看内容挺少的,只有两个主要api,就花了点时间阅读了一下源码,感觉挺实用的,在这安利给大家. getpass.getpass(prompt='Password: ', stream=None) 调用该函数可以在命令行窗口里面无回显输入密码.参数prompt代表提示字符串,默认是'Password: '.在Unix系统中,strea

  • RxJava中map和flatMap的用法区别源码解析

    目录 前言: 作用 使用方法: map flatMap 源码分析 map flatMap 结语 前言: RxJava中提供了大量的操作符,这大大提高了了我们的开发效率.其中最基本的两个变换操作符就是map和flatMap.而其他变换操作符的原理基本与map类似. map和flatMap都是接受一个函数作为参数(Func1)并返回一个被观察者Observable Func1的< I,O >I,O模版分别为输入和输出值的类型,实现Func1的call方法对I类型进行处理后返回O类型数据,只是fla

  • 分析Java中ArrayList与LinkedList列表结构的源码

    一.ArrayList源码分析(JDK7) ArrayList内部维护了一个动态的Object数组,ArrayList的动态增删就是对这个对组的动态的增加和删除. 1.ArrayList构造以及初始化 ArrayList实例变量 //ArrayList默认容量 private static final int DEFAULT_CAPACITY = 10; //默认空的Object数组, 用于定义空的ArrayList private static final Object[] EMPTY_ELE

  • jQuery中数据缓存$.data的用法及源码完全解析

    一.实现原理: 对于DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQuery.cache中.在读取.设置.移除数据时,将通过关联id从全局缓存对象jQuery.cache中找到关联的数据缓存对象,然后在数据缓存对象上执行读取.设置.移除操作. 对于Javascript对象,数据则直接存储在该Javascript对象的属性jQuery.expando上.在读取.设置.移

随机推荐