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的小伙伴们都有发表相应的文章来讲它.我看 ...
随机推荐
- 几种Menu和几种对话框
一.Menu 1.OptionsMenu(弹出菜单) (1)显示弹出菜单布局必须要重写的方法 onCreateOptionsMenu 该方法必须返回true ...
- Android 轻量级ORM数据库开源框架ActiveAndroid 源码分析
ActiveAndroid 项目地址在https://github.com/pardom/ActiveAndroid 关于他的详细介绍和使用步骤 可以看下面两篇文章: https://github.c ...
- K2 Blackpearl开发技术要点(Part1)
转:http://www.cnblogs.com/dannyli/archive/2012/09/14/2685260.html K2 Blackpearl开发技术要点(Part1) 预知后事如何,请 ...
- 解决键盘上符号打出来的和标着的不一样的错误&不能用ctrl+space切换输入法错误
0.右键输入法栏,点设置 1.增加”美式键盘“ 2.切换“默认键盘”为美式 3.删除“英式键盘” 4.高级键设置,改为ctrl+space
- [转]几个开源的.net界面控件
转自原文 几个不错的开源的.net界面控件,介绍几个自己觉得不错的几个开源的.net界面控件. DockPanel Suite:开发类似VS.net的界面,#Develop就是使用的这个控件. 网址: ...
- java jxl 向Excel中追加数据而不覆盖原来数据的例子
向先原来就有数据的Excel写数据是不会覆盖原有的数据,只是在追加数据. public class Excel { public Excel() { } public void ...
- 基于XMPP协议的手机多方多端即时通讯方案
一.开发背景 1.国际背景 随着Internet技术的高速发展,即时通信已经成为一种广泛使用的通信方式.1996年Mirabilis公司推出了世界上第一个即时通信系统ICQ,不到10年间,即时通信(I ...
- Dapper的完整扩展(转)
真心想说:其实...我不想用Dapper,如果OrmLite.Net支持参数化的话,也就没Dapper的什么事情了,对于OrmLite.Net只能做后续跟踪...... 这个其实是看了Dapper作者 ...
- hdu 1166 敌兵布阵（线段树单点更新，区间查询）
题意:区间和 思路:线段树 #include<iostream> #include<stdio.h> using namespace std; #define MAXN 500 ...
- 如何配置Drupal数据库信息？
Drupal的数据库连接信息通过文件settings.php中的变量$databases设置.变量$databases是一个二维的数组,第一维称为key,第二维称为target.使用这种方式可以处理多 ...