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的小伙伴们都有发表相应的文章来讲它.我看 ...
随机推荐
- AIX 第5章 指令记录
AIX引导过程 AIX不同引导模式 AIX的关闭 AIX的计划任务 AIX服务的管理 AIX的常用日志 POST=Power On Self Test rc.boot 的三次调用 /etc/ini ...
- ORACLE RAC集群硬件资源管理与单节点的区别
硬件资源是由OS kernel管理的,应用软件是不能直接访问硬件的,必须通过OS kernel提供的API接口间接访问,OS kernel 除了要完成用户的请求,还通过进程调度等机制来控制多进程对资源 ...
- ORACLE 中KILL session
我们知道,在Oracle数据库中,可以通过kill session的方式来终止一个进程,其基本语法结构为: alter system kill session 'sid,serial#' ; 被kil ...
- IOS AutoLayout 遍历修改约束
self.cvv2View.hidden = YES; self.periodView.hidden = YES; [self.contentView.constraints enumerateObj ...
- IOS设备启动图像命名规范
- Configuring and troubleshooting a Schema Provider
原文:https://codesmith.atlassian.net/wiki/display/Generator/Configuring+and+troubleshooting+a+Schema+P ...
- NSRangeFromString 测试
官网文档 Returns a range from a textual representation. Declaration SWIFT func NSRangeFromString(_ aStri ...
- LeetCode(4) － Median of Two Sorted Arrays
题目要求很简单,就是给你两个已经排好序的数组nums1(长度为m)和nums2(长度为n),找出他们的中间值.返回值类型double是因为如果数字个数是偶数个,就要返回中间两个数的平均值.这题最简单的 ...
- Debian openvpn 配置
1.安装openvpn 和 iptables -- Debain 可以使用命令行`apt-get install openvpn iptables` 2.配置服务器 -- ```shell cp -R ...
- 筛选DataTable数据的方法
对DataTable进行过滤筛选的一些方法Select,dataview 当你从数据库里取出一些数据,然后要对数据进行整合,你很容易就会想到: DataTable dt = new DataTable ...