Flex中如何在TabBar控件中添加图标(icons)的例子

By Minidxer | July 29, 2008

和前面的Flex中给TabNavigator控件增加Icons图标的例子类似的，接下来的例子演示了Flex中如何在TabBar控件中添加图标(icons)。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整实现代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             [Bindable]
  10.             [Embed(source="assets/bulletCheck.png")]
  11.             private var BulletCheck:Class;
  12.  
  13.             [Bindable]
  14.             [Embed(source="assets/bulletWarning.png")]
  15.             private var BulletWarning:Class;
  16.  
  17.             [Bindable]
  18.             [Embed(source="assets/bulletCritical.png")]
  19.             private var BulletCritical:Class;
  20.         ]]>
  21.     </mx:Script>
  22.  
  23.     <mx:VBox id="box" width="400" verticalGap="0">
  24.         <mx:TabBar id="tabBar"
  25.                 direction="horizontal"
  26.                 dataProvider="{viewStack}"
  27.                 width="100%" />
  28.  
  29.         <mx:ViewStack id="viewStack"
  30.                 width="100%"
  31.                 height="100"
  32.                 backgroundColor="white"
  33.                 borderSides="left bottom right"
  34.                 borderStyle="solid"
  35.                 borderThickness="1">
  36.  
  37.             <mx:Canvas id="child1"
  38.                     label="Success"
  39.                     icon="{BulletCheck}">
  40.                 <mx:Label text="one" />
  41.             </mx:Canvas>
  42.  
  43.             <mx:Canvas id="child2"
  44.                     label="Warning"
  45.                     icon="{BulletWarning}">
  46.                 <mx:Label text="two" />
  47.             </mx:Canvas>
  48.  
  49.             <mx:Canvas id="child3"
  50.                     label="Error"
  51.                     icon="{BulletCritical}">
  52.                 <mx:Label text="three" />
  53.             </mx:Canvas>
  54.  
  55.         </mx:ViewStack>
  56.     </mx:VBox>
  57.  
  58. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads