Flex中如何通过tabWidth样式设置TabBar每个Tab宽度的例子

By Minidxer | October 5, 2008

接下来的例子演示了Flex中如何通过tabWidth样式，设置TabBar每个Tab宽度。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="TabBar_tabWidth_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Array id="arr">
  9.         <mx:Object label="Red" />
  10.         <mx:Object label="Orange" />
  11.         <mx:Object label="Yellow" />
  12.         <mx:Object label="Green" />
  13.         <mx:Object label="Blue" />
  14.     </mx:Array>
  15.  
  16.     <mx:ApplicationControlBar dock="true">
  17.         <mx:Form styleName="plain">
  18.             <mx:FormItem label="tabWidth:">
  19.                 <mx:HSlider id="slider"
  20.                         minimum="40"
  21.                         maximum="120"
  22.                         value="100"
  23.                         snapInterval="1"
  24.                         tickInterval="10"
  25.                         liveDragging="true" />
  26.             </mx:FormItem>
  27.         </mx:Form>
  28.     </mx:ApplicationControlBar>
  29.  
  30.     <mx:TabBar id="tabBar"
  31.             dataProvider="{arr}"
  32.             tabWidth="{slider.value}" />
  33.  
  34. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: TabBar | 1 Comment » | Tags: ,

你可能还对下列文章感兴趣:

One comment | Add One

  1. 刘小姐 - 12/15/2010 at 3:53 pm

    如何实现滚动条不在下面,在两边用箭头表示呢?

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll