Flex中如何利动态改变Accordion容器中当前选中项目的例子

By Minidxer | October 5, 2008

功能和在前面的
Flex中如何利用accordion的selectedIndex属性动态改变Accordion容器中当前选中项目的例子类似的，接下来的例子演示了Flex中如何利动态改变Accordion容器中当前选中项目。

让我们先来看一下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.             import mx.events.ItemClickEvent;
  10.             import mx.events.ListEvent;
  11.  
  12.             private function comboBox_change(evt:ListEvent):void {
  13.                 accordion.selectedChild = evt.currentTarget.selectedItem.data;
  14.             }
  15.  
  16.             private function linkBar_itemClick(evt:ItemClickEvent):void {
  17.                 accordion.selectedChild = evt.item.data;
  18.             }
  19.         ]]>
  20.     </mx:Script>
  21.  
  22.     <mx:Array id="arr">
  23.         <mx:Object label="One" data="{vOne}" />
  24.         <mx:Object label="Two" data="{vTwo}" />
  25.         <mx:Object label="Three" data="{vThree}" />
  26.         <mx:Object label="Four" data="{vFour}" />
  27.         <mx:Object label="Five" data="{vFive}" />
  28.     </mx:Array>
  29.  
  30.     <mx:ApplicationControlBar dock="true">
  31.         <mx:Label text="selectedChild:" />
  32.         <mx:ComboBox id="comboBox"
  33.                 dataProvider="{arr}"
  34.                 selectedIndex="{accordion.selectedIndex}"
  35.                 change="comboBox_change(event);" />
  36.  
  37.         <mx:Spacer width="100%" />
  38.  
  39.         <mx:Label text="selectedChild:" />
  40.         <mx:LinkBar id="linkBar" dataProvider="{arr}"
  41.                 itemClick="linkBar_itemClick(event);" />
  42.     </mx:ApplicationControlBar>
  43.  
  44.     <mx:Accordion id="accordion"
  45.             historyManagementEnabled="false"
  46.             width="100%"
  47.             height="100%">
  48.         <mx:VBox id="vOne" label="One" />
  49.         <mx:VBox id="vTwo" label="Two" />
  50.         <mx:VBox id="vThree" label="Three" />
  51.         <mx:VBox id="vFour" label="Four" />
  52.         <mx:VBox id="vFive" label="Five" />
  53.     </mx:Accordion>
  54.  
  55. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Accordion | No Comments » | Tags: ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll