Flex中如何通过toggleOnClick属性拴住ToggleButtonBar上按钮的例子

By Minidxer | June 25, 2009

接下来的例子演示了Flex中如何通过toggleOnClick属性,拴住ToggleButtonBar上按钮。中文的“拴住”估计比较难理解,实际上可以简单的理解为记住被点击按钮就差不多了。 :)

让我们先来看一下Demo可以点击这里察看源代码):


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="ToggleButtonBar_toggleOnClick_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="top"
  6.         backgroundColor="white">
  7.  
  8.     <mx:ApplicationControlBar dock="true">
  9.         <mx:Form styleName="plain">
  10.             <mx:FormItem label="toggleOnClick:">
  11.                 <mx:CheckBox id="checkBox" />
  12.             </mx:FormItem>
  13.             <mx:FormItem label="selectedIndex:">
  14.                 <mx:Label text="{toggleButtonBar.selectedIndex}" />
  15.             </mx:FormItem>
  16.         </mx:Form>
  17.     </mx:ApplicationControlBar>
  18.  
  19.     <mx:ToggleButtonBar id="toggleButtonBar"
  20.             toggleOnClick="{checkBox.selected}"
  21.             dataProvider="{viewStack}" />
  22.  
  23.     <mx:ViewStack id="viewStack"
  24.             width="100%"
  25.             height="100%">
  26.         <mx:VBox label="Red" backgroundColor="red" />
  27.         <mx:VBox label="Orange" backgroundColor="haloOrange" />
  28.         <mx:VBox label="Yellow" backgroundColor="yellow" />
  29.         <mx:VBox label="Green" backgroundColor="haloGreen" />
  30.         <mx:VBox label="Blue" backgroundColor="haloBlue" />
  31.     </mx:ViewStack>
  32.  
  33.     <mx:Label text="{Capabilities.version}" />
  34.  
  35. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: ToggleButtonBar | No Comments » | Tags: ,

Search Posts