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

By Minidxer | October 4, 2008

接下来的例子演示了Flex中如何利用accordion的selectedIndex属性,动态改变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.         creationComplete="init();">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             private function init():void {
  11.                 slider.maximum = accordion.numChildren -1;
  12.                 slider.labels = [0, slider.maximum];
  13.             }
  14.  
  15.             private function dataTipFunc(item:Object):String {
  16.                 return "selectedIndex = " + item.toString();
  17.             }
  18.         ]]>
  19.     </mx:Script>
  20.  
  21.     <mx:ApplicationControlBar dock="true">
  22.         <mx:Label text="selectedIndex:" />
  23.         <mx:HSlider id="slider"
  24.                 minimum="0"
  25.                 liveDragging="true"
  26.                 snapInterval="1"
  27.                 tickInterval="1"
  28.                 change="accordion.selectedIndex = event.value;"
  29.                 dataTipFormatFunction="dataTipFunc"
  30.                 dataTipPlacement="bottom" />
  31.     </mx:ApplicationControlBar>
  32.  
  33.     <mx:Accordion id="accordion"
  34.             historyManagementEnabled="false"
  35.             width="100%"
  36.             height="100%"
  37.             change="slider.value = event.newIndex;">
  38.         <mx:VBox label="One" />
  39.         <mx:VBox label="Two" />
  40.         <mx:VBox label="Three" />
  41.         <mx:VBox label="Four" />
  42.         <mx:VBox label="Five" />
  43.     </mx:Accordion>
  44.  
  45. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: Accordion | 1 Comment » | 1,222 views Tags: ,

Search Posts