Flex SuperTabNavigator Tab标签图片不显示或图片显示不完全
<?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" minWidth="955" minHeight="600"
xmlns:mdi="http://code.google.com/p/flexlib/"
creationComplete="applicationCreationComplete(event)">
<fx:Declarations>
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace mdi "http://code.google.com/p/flexlib/";
@namespace tab "flexlib.controls.tabBarClasses.*";
mx|ProgressBar
{
fontSize:10;
trackHeight:15;
paddingRight:20;
}
tab|SuperTab{
tabCloseButtonStyleName:SuperTabButtonStyle;
}
.SuperTabButtonStyle{
icon:Embed(source="com/xyw/sys/image/close.png");
downSkin:Embed(source="com/xyw/sys/image/close.png");
overSkin:Embed(source="com/xyw/sys/image/close.png");
upSkin:Embed(source="com/xyw/sys/image/close.png");
}
mdi|SuperTabNavigator{
tabStyleName:myTab;
firstTabStyleName:myTab;
lastTabStyleName:myTab;
}
.myTab{
contentBackgroundColor:#FF0000;
fontFamily:宋体;
fontSize:15;
fontWeight:bold;
up-skin:ClassReference("com.xyw.sys.custom.skin.SuperTabNavigator");
down-skin:ClassReference("com.xyw.sys.custom.skin.SuperTabNavigator");
over-skin:ClassReference("com.xyw.sys.custom.skin.SuperTabNavigator");
disabled-skin:ClassReference("com.xyw.sys.custom.skin.SuperTabNavigator");
selected-up-skin:ClassReference("com.xyw.sys.custom.skin.SelectedSuperTabNavigator");
selected-down-skin:ClassReference("com.xyw.sys.custom.skin.SelectedSuperTabNavigator");
selected-over-skin:ClassReference("com.xyw.sys.custom.skin.SelectedSuperTabNavigator");
selected-disabled-skin:ClassReference("com.xyw.sys.custom.skin.SelectedSuperTabNavigator");
}
mx|DividedBox
{
/*fontWeight:bold*/
fontWeight:normal;
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Image;
import mx.controls.LinkButton;
import mx.events.DividerEvent;
import mx.events.FlexEvent;
import spark.components.NavigatorContent;
import spark.layouts.VerticalLayout;
[Bindable]
private var arrayCollection:ArrayCollection = new ArrayCollection([
{neName:"教工路文一路路口相机_4", neType:"相机" , neAlarmType:"设备告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"2级"},
{neName:"学院路文一路路口相机_3", neType:"相机" , neAlarmType:"环境告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"3级"},
{neName:"文一路莫干山路路口相机_1", neType:"相机" , neAlarmType:"连接通信告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"1级"},
{neName:"文一路莫干山路路口相机_3", neType:"相机" , neAlarmType:"性能告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"4级"}
]);
private var menusString:String = "<menus><menuitem label='系统维护'><menuitem label='系统用户管理'></menuitem><menuitem label='系统权限管理'></menuitem><menuitem label='系统角色管理'></menuitem></menuitem><menuitem label='信息申请'><menuitem label='农村低保申请'><menuitem label='家庭基本信息登记'></menuitem><menuitem label='房产信息登记'></menuitem><menuitem label='车辆信息登记'></menuitem><menuitem label='保险信息登记'></menuitem><menuitem label='工商信息登记'></menuitem><menuitem label='税务信息登记'></menuitem><menuitem label='经济信息登记'></menuitem></menuitem><menuitem label='城市低保申请'><menuitem label='家庭基本信息登记'></menuitem><menuitem label='房产信息登记'></menuitem><menuitem label='车辆信息登记'></menuitem><menuitem label='保险信息登记'></menuitem><menuitem label='工商信息登记'></menuitem><menuitem label='税务信息登记'></menuitem><menuitem label='经济信息登记'></menuitem></menuitem><menuitem label='综合信息申请'><menuitem label='家庭基本信息登记'></menuitem></menuitem></menuitem><menuitem label='信息初审'></menuitem><menuitem label='信息审核'></menuitem><menuitem label='信息审批'></menuitem><menuitem label='信息查询'></menuitem></menus>";
private var menusXML:XML = new XML(menusString);
[Bindable]
[Embed('com/xyw/sys/image/account.gif')]
private var accountIcon:Class;
[Bindable]
[Embed('com/xyw/sys/image/manage.gif')]
private var manageIcon:Class;
[Bindable]
[Embed('com/xyw/sys/image/manager.gif')]
private var managerIcon:Class;
[Bindable]
[Embed('com/xyw/sys/image/other.gif')]
private var otherIcon:Class;
[Bindable]
[Embed('com/xyw/sys/image/people.gif')]
private var peopleIcon:Class;
private function applicationCreationComplete(event:FlexEvent):void
{
this.tree.showRoot = false;
this.tree.dataProvider = this.menusXML;
this.alarmGrid.dataProvider = this.arrayCollection;
}
public function deleteAlarmRecord():void{
this.arrayCollection.removeItemAt(alarmGrid.selectedIndex);
}
public function confirmAlarmInfo():void{
this.arrayCollection.getItemAt(alarmGrid.selectedIndex).confirmStatus = "已确认";
this.alarmGrid.dataProvider = this.arrayCollection;
}
]]>
</fx:Script>
<s:Panel id="loginPanle" width="350" title="系统登录" height="150" chromeColor="#2088c7" horizontalCenter="0" verticalCenter="0">
<s:VGroup width="100%" horizontalCenter="0" verticalCenter="0">
<s:HGroup width="100%" paddingLeft="30">
<s:Label text="用户名:" paddingTop="3" fontSize="16"/><s:TextInput id="username" width="160"/><s:Button label="重置"/>
</s:HGroup>
<s:HGroup width="100%" paddingLeft="30">
<s:Label text="密 码:" paddingTop="3" fontSize="16"/><s:TextInput id="password" width="160"/><s:Button label="登录"/>
</s:HGroup>
</s:VGroup>
</s:Panel>
<mdi:MDICanvas visible="false" id="mdiCanvas" backgroundColor="#2088c7" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%">
<s:VGroup width="100%" height="100%" gap="0">
<s:Group width="100%" height="70">
<s:layout>
<s:HorizontalLayout horizontalAlign="right" verticalAlign="bottom"/>
</s:layout>
<s:Rect width="100%" height="100%">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#cbe5ea"/>
<s:GradientEntry color="#429edd"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:Group>
<s:Group width="100%" height="8">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#2088c7"/>
</s:fill>
</s:Rect>
</s:Group>
<s:HGroup width="100%" height="100%" gap="0">
<s:Group width="8" height="100%">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#2088c7"/>
</s:fill>
</s:Rect>
</s:Group>
<!--
<s:Group width="5" height="100%">
<s:Rect width="100%" height="100%">
<s:fill>
<s:LinearGradient>
<s:GradientEntry color="#2088c7"/>
<s:GradientEntry color="#ffffff"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:Group>
-->
<!--
<s:VGroup width="15%" height="100%" gap="0">
<mx:Tree id="tree" labelField="@label" fontWeight="bold" chromeColor="#2088A7" fontSize="15" paddingLeft="5" paddingBottom="5" paddingRight="5" paddingTop="5" borderVisible="false" width="100%" height="100%" borderAlpha="0">
</mx:Tree>
</s:VGroup>
-->
<!--
<s:Group width="5" height="100%">
<s:Rect width="100%" height="100%">
<s:fill>
<s:LinearGradient>
<s:GradientEntry color="#ffffff"/>
<s:GradientEntry color="#2088c7"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:Group>
<s:Group width="5" height="100%">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#2088c7"/>
</s:fill>
</s:Rect>
</s:Group>
-->
<mx:HDividedBox width="100%" height="100%" paddingTop="-3">
<mx:Tree id="tree" labelField="@label" chromeColor="#2088A7" fontSize="14" rowHeight="25" borderVisible="false" width="10%" height="100%" borderAlpha="0"/>
<mdi:SuperTabNavigator dragEnabled="false" id="superTabNavigator" width="85%" height="100%" borderAlpha="0">
<mx:VBox width="100%" height="100%" label="档案登记" paddingLeft="10" paddingRight="10">
<s:DataGrid id="alarmGrid" rowHeight="25" width="100%" height="500" requestedRowCount="4"
skinClass="com.xyw.sys.custom.skin.CustomDataGridSkin" alternatingRowColors="[#FFFFFF,#EEEEEE]">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="neName" headerText="名称"></s:GridColumn>
<s:GridColumn dataField="neType" headerText="类型"></s:GridColumn>
<s:GridColumn dataField="removeStatus" headerText="清除状态"></s:GridColumn>
<s:GridColumn dataField="confirmStatus" headerText="确认状态"></s:GridColumn>
<s:GridColumn headerText="操作">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:HGroup>
<mx:LinkButton toolTip="清除" label="清除" click="outerDocument.deleteAlarmRecord();" textDecoration="underline" color="#2066CF" fontWeight="normal"/>
<mx:LinkButton toolTip="确认" label="确认" click="outerDocument.confirmAlarmInfo()" textDecoration="underline" color="#2066CF" fontWeight="normal"/>
</s:HGroup>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</mx:VBox>
<mx:VBox width="85%" height="100%" label="档案修改">
<s:Panel width="100%" height="100%" title="Panel">
</s:Panel>
</mx:VBox>
<mx:VBox width="85%" height="100%" label="信息审核">
<s:Panel width="100%" height="100%" title="Panel">
</s:Panel>
</mx:VBox>
<mx:VBox width="85%" height="100%" label="信息审批">
<s:Panel width="100%" height="100%" title="Panel">
</s:Panel>
</mx:VBox>
</mdi:SuperTabNavigator>
</mx:HDividedBox>
<s:Group width="5" height="100%">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#2088c7"/>
</s:fill>
</s:Rect>
</s:Group>
</s:HGroup>
<s:Group contentBackgroundColor="#2088c7" width="100%" height="25">
<s:Rect width="100%" height="100%" top="0" left="0" right="0" bottom="0">
<s:fill>
<s:SolidColor color="#2088c7"/>
</s:fill>
</s:Rect>
<s:HGroup width="100%" height="25" verticalAlign="middle" horizontalAlign="center">
<s:Label text="郑州新益旺电子科技有限公司" width="70%" height="100%" textAlign="right" verticalAlign="middle"/>
<mx:ProgressBar visible="true" width="30%" height="15" label="加载中..." direction="right" labelPlacement="center"/>
</s:HGroup>
</s:Group>
</s:VGroup>
</mdi:MDICanvas>
</s:Application>
名字:SelectedSuperTabNavigator.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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="400" height="300">
<fx:Declarations>
</fx:Declarations>
<s:Rect left="1" right="1" top="1" bottom="0" topLeftRadiusY="6" topRightRadiusY="6" topLeftRadiusX="6" topRightRadiusX="6">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#FFFFFF" alpha="1" />
<s:GradientEntry color="#FFFFFF" alpha="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:SparkSkin>
名字:SuperTabNavigator.mxml<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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="78" height="66">
<fx:Declarations>
</fx:Declarations>
<s:Rect left="1" right="1" top="1" bottom="0" topLeftRadiusY="6" topRightRadiusY="6" topLeftRadiusX="6" topRightRadiusX="6">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#ffffff" alpha="1"/>
<s:GradientEntry color="#2088c7" alpha="1"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:SparkSkin>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
第一个图标显示不完全:
FLex3中弹出窗口包含TabNavigator时标签页的标题显示不完全的问题及解决方法
解决方法有3种：
1.增加样式activeTabStyle并设置字体不加粗。下面的代码为了统一标题的样式，也设置了TabNavigator的tabStyleName样式。
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="300" fontSize="12">
<mx:Style>
.tabStyle, .activeTabStyle
{
font-weight:normal
}
</mx:Style>
<mx:Script>
<!--[CDATA[
import mx.managers.PopUpManager;
]]-->
</mx:Script>
<mx:TabNavigator width="100%" height="100%" creationPolicy="all" tabStyleName="tabStyle">
<mx:Canvas label="基本信息" width="100%" height="100%">
<mx:Button x="39" y="10" label="按钮"/>
</mx:Canvas>
<mx:Canvas label="基信本息" width="100%" height="100%">
<mx:Label id="msgLbl" x="39" y="10" text="标签"/>
</mx:Canvas>
</mx:TabNavigator>
<mx:ControlBar horizontalAlign="right">
<mx:Button id="closeBtn" label="Close" click="PopUpManager.removePopUp(this)"/>
</mx:ControlBar>
</mx:Panel>
2.保证最后一个文本控件的字体是加粗的。如以上的代码如果TabNavigator的creationPolicy是默认的auto，则由于closeBtn默认是加粗的，因此可以不设置。如果creationPolicy是all，则必须保证最后一页的最后一个控件的字体是加粗的，也可以放一个不显示的Label，如
<mx:Label includeInLayout="false" visible="false" text="隐藏的Label" fontWeight="bold"/>
3.在第一个标签页的label后加一个空格，如
<mx:Canvas label="基本信息 " width="100%" height="100%">
经试验，所需空格的数量标题的长度有关，当标题只有一个字时不用加空格，之后每增加4个字要加一个空格。
如果弹出窗口时不执行PopUpManager.centerPopUp()，或者不用弹出窗口、TabNavigator直接显示在Application中，此时TabNavigator显示出来后会再刷新一次从而显示正确的标题，因此不需做任何改动。
Flex SuperTabNavigator Tab标签图片不显示或图片显示不完全的更多相关文章
- 在Bootstrap开发中解决Tab标签页切换图表显示问题
在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...
- 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图
SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...
- ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: 'xxx'问题
今天工作遇到一个问题: 需求背景:页面中有几个tab,需要根据登录用户的权限控制tab标签的显示与隐藏 . <el-tabs @tab-click="handleClick" ...
- “焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”仅需一个SuperSlidev2.1
官网:http://www.superslide2.com/index.html 1. 标签切换 / 书签切换 / 默认效果 2. 焦点图 / 幻灯片 3. 图片滚动-左 4. 图片滚动-上 5. 图 ...
- React Native 系列(九) -- Tab标签组件
前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...
- JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
- 多iframe使用tab标签方式添加、删除、切换的处理实例
紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...
- Android（java）学习笔记129：Tab标签的使用
1.案例1---TabProject (1)首先是main.xml文件: <?xml version="1.0" encoding="utf-8"?> ...
- Android UI--ViewPager扩展Tab标签指示
Android UI--ViewPager扩展Tab标签指示 2013年8月30日出来冒冒泡 ViewPager这个控件已经不算是陌生的了,各种玩Android的小伙伴们都有发表相应的文章来讲它.我看 ...
随机推荐
- Android中弹出输入法界面不影响app界面布局
默认情况下,输入法弹出的时候,原来的view会被挤扁.有些应用不想被挤,它们可以接受被输入法view覆盖在上面.这时候需要在AndroidManifest.xml acitivty里面加上一句: an ...
- android studio开发工具的android library打包文件（.aar）本地引用
by 蔡建良 2014-5-13 关键点: 利用Gradle发布本地maven库支持android library 打包文件(*.aar) 的本地引用 开发环境: windows7 64位操作系统 a ...
- Java并发编程-总纲
Java 原生支持并发,基本的底层同步包括:synchronized,用来标示一个方法(普通,静态)或者一个块需要同步执行(某一时刻,只允许一个线程在执行代码块).volatile,用来标识一个变量是 ...
- Selenium2Library系列 keywords 之 _ElementKeywords
#公有方法: (1)current_frame_contains(self, text, loglevel='INFO') (2)current_frame_should_not_contain(se ...
- Selenium2Library系列 keywords 之 _SelectElementKeywords 之 select_from_list_by_label(self, locator, *labels)
def select_from_list_by_label(self, locator, *labels): """Selects `*labels` from list ...
- HTML 学习进度备忘
书签:”HTML 高级教程“及后面的内容尚未学习,另外跳过的内容有待跟进 __________________ 学习资源:W3School. 开始时间:2013.11.20 简述:此网址做为学习教程相 ...
- [翻译]Python——十年语言之冠
最近我发现了这个PYPL——编程语言流行指数.它对各种语言的流行指标进行了二次发掘.作者指出TIOBE指数很可能不能反映出真实情况,归咎于一些编程语言的名称会导致误解.他引入了一些新术语,利用谷歌趋势 ...
- javascript中=、==、===区别详解
javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...
- kali 安装完成后，无法进入界面
vmware 下安装 kali-1.9 ,安装完成后,无法进入界面,提示: 系统出错且无法恢复,请联系管理员 解决办法如下: 在新建虚拟机的时候,选择客户端系统:linux Debian 7. 因 ...
- 获取子窗口中使用jQuery.data()设置的参数
http://hyj1254.iteye.com/blog/643035 假设在iframe子窗口中设置了$('#mydata').data('key','hello world'); 那在包含ifr ...