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的小伙伴们都有发表相应的文章来讲它.我看 ...
随机推荐
- Java中String为什么是final
final概念: 如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父亲被继承.因此,一个类不能既被声明为abstract,又被声明为final. 将变量或方法声明为final,可以 ...
- sort方法的使用、随机数的产生
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序. var arr = ['a','b','m','c','d']; arr.sort(); ...
- 用xsd验证xml
using System; using System.Text; using System.Xml; namespace WebApplication1 { public partial class ...
- WPF为提示信息文本增加闪烁效果
程序通常需要显示某些提醒用户警示的信息,如:收件箱(40)其中数量闪烁就会起到警示效果.可以适用如下Storyboard实现: <ItemsControl.ItemTemplate> &l ...
- C/C++中static关键字详解-zz
静态变量作用范围在一个文件内,程序开始时分配空间,结束时释放空间,默认初始化为0,使用时可以改变其值. 静态变量或静态函数只有本文件内的代码才能访问它,它的名字在其它文件中不可见.用法1:函数内部声明 ...
- the server responded with a status of 404 (Not Found)
1.出现这种问题,第一时间检查文件路径是否正确,相对路径或者绝对路径是否正确 2.某些后缀的文件是否能够找到,我现在碰到的就是.md文件找不到,需要配置web.config <system.we ...
- RandomAcessFile、MappedByteBuffer和缓冲读/写文件
项目需要进行大文件的读写,调查测试的结果使我决定使用MappedByteBuffer及相关类进行文件的操作,效果不是一般的高. 网上参考资源很多,如下两篇非常不错: 1.花1K内存实现高效I/O的Ra ...
- Garlands
题意: n个数分成m段,每段偶数个数,最小化和最大段的半个区间的数字和. 分析: 先想到了二分,dp求能分成的最小段数. #include <map> #include <set&g ...
- 网页元素定位神器之Xpath详解
摘要: 经常在工作中会使用到XPath的相关知识,但每次总会在一些关键的地方不记得或不太清楚,所以免不了每次总要查一些零碎的知识,感觉即很烦又浪费时间,所以对XPath归纳及总结一下. ... ...
- javascript --- 面向对象 --- 封装
javascript中有原型对象和实例对象 如有疑问请参考:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_enca ...