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-过滤器-监听器-拦截器
1.过滤器 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码.做一些业务逻辑判断等.其工作原理是,只要你在web.xml ...
- phonegap修改软件名称和图标
修改app 图标 打开AndroidManifest.xml文件 修改application 节点 <application android:allowBackup="true&quo ...
- Android SurfaceView使用详解
1. SurfaceView的定义前面已经介绍过View了,下面来简单介绍一下SurfaceView,参考SDK文档和网络资料:SurfaceView是View的子类,它内嵌了一个专门用于绘制的Sur ...
- Xcode各版本官方下载及百度云盘下载, Mac和IOS及Xcode版本历史.
官方下载, 用开发者账户登录,建议用Safari浏览器下载. 官方下载地址: https://developer.apple.com/xcode/downloads/ 百度云盘下载地址: http:/ ...
- devexpress GridControl 行指示列图标绘制
Row Indicator Panel The row indicator panel represents a region displayed at the left edge of the Vi ...
- linux系统上Mysql数据库导入导出操作
需求:把MySQL数据库目录中的dz数据库备份到/home/dz_bak.sql ,然后再新建一个数据库dzbak,最后把/home/dz_bak.sql 导入到数据库dzbak中.操作如下:以下操作 ...
- 自定义控件如何给特殊类型的属性添加默认值 z
定义控件如何给特殊类型的属性添加默认值了,附自定义GroupBox一枚 标题有点那啥,但确实能表达我掌握此法后的心情. 写自定义控件时往往会有一个需求,就是给属性指定一个默认值(就是可以在VS中右键该 ...
- Java 与无符号那些事儿
最近在使用 Java 作为 WebSocket 客户端连接 Node.js 的 WebSocket 服务器的时候,由于使用的客户端库比较老,所以遇到了字节符号的问题,上网查了一下,看到这篇文章写的很有 ...
- LoadRunner 各个指标分析
我们要监视CPU,内存.硬盘的资源情况.得到以下的参数提供分析的依据.%processor time(processor_total):器消耗的处理器时间数量.如果服务器专用于sql server 可 ...
- 将a、b的值进行交换，并且不使用任何中间变量
方法1:用异或语句 a = a^b; b = a^b; a = a^b; 注:按位异或运算符^是双目运算符,其功能是参与运算的两数各对应的二进制位相异或,当对应的二进制相异时,结果为1.参与运算数仍以 ...