Flex Accordian控件

2018-01-01 18:53 更新

介紹

Accordion控件是一個導(dǎo)航器容器,它具有子容器的集合,但每次只能看到其中一個子容器。

類聲明

以下是 mx.containers.Accordian 類的聲明:

public class Accordion 
   extends Container
      implements IHistoryManagerClient, IFocusManagerComponent

公共屬性

S.N.屬性和描述
1

headerRenderer:IFactory

一個工廠用于為每個孩子創(chuàng)建導(dǎo)航按鈕。

2

historyManagementEnabled:Boolean

如果設(shè)置為true,此屬性將啟用此Accordion容器中的歷史記錄管理。

3

resizeToContent:Boolean

如果設(shè)置為true,此Accordion將自動調(diào)整為其當(dāng)前子項(xiàng)的大小。

4

selectedChild:INavigatorContent

對當(dāng)前可見子容器的引用。

5

selectedIndex:int

當(dāng)前可見子容器的基于零的索引。

受保護(hù)的屬性

S.N.屬性和描述
1

contentHeight:Number

[只讀]顯示內(nèi)容的區(qū)域的高度(以像素為單位)。

2

contentWidth:Number

[只讀]顯示內(nèi)容的區(qū)域?qū)挾?以像素為單位)。

公共方法

S.N.方法和描述
1

Accordion()

構(gòu)造函數(shù)。

2

getHeaderAt(index:int):Button

返回對子容器的導(dǎo)航器按鈕的引用。

3

loadState(state:Object):void

加載此對象的狀態(tài)。

4

saveState():Object

保存此對象的狀態(tài)。

事件

S.N.事件和描述
1

change

當(dāng)所選的子容器更改時分派。

繼承的方法

此類繼承以下類中的方法:

  • mx.core.Container

  • mx.core.UIComponent

  • mx.core.FlexSprite

  • flash.display.Sprite

  • flash.display.DisplayObjectContainer

  • flash.display.InteractiveObject

  • flash.display.DisplayObject

  • flash.events.EventDispatcher

  • Object

Flex手風(fēng)琴控制示例

讓我們按照以下步驟,通過創(chuàng)建測試應(yīng)用程序來檢查Flex應(yīng)用程序中的Accordion控件的使用:

步驟描述
1 Flex - 創(chuàng)建應(yīng)用程序章節(jié)中所述,在包 com.tutorialspoint.client 下創(chuàng)建名為 HelloWorld 的項(xiàng)目。
2修改 HelloWorld.mxml ,如下所述。 保持文件的其余部分不變。
3編譯并運(yùn)行應(yīng)用程序,以確保業(yè)務(wù)邏輯按照要求工作。

以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.mxml 的內(nèi)容。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%" height="100%" minWidth="500" minHeight="500"
   >
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>	   
   <s:BorderContainer width="630" height="480" id="mainContainer" 
      styleName="container">
      <s:VGroup width="100%" height="100%" gap="50" 
         horizontalAlign="center" verticalAlign="middle">
         <s:Label id="lblHeader" text="Complex Controls Demonstration" 
            fontSize="40" color="0x777777" styleName="heading"/>
            <s:Panel id="accordianPanel" title="Using Accordian" 
               width="500" height="300" >
               <s:layout>
                  <s:HorizontalLayout  gap="10" verticalAlign="middle" 
                     horizontalAlign="center"/>	
               </s:layout>				
               <mx:Accordion id="accordion" width="95%" height="90%">
                  <s:NavigatorContent label="Section 1" width="100%" 
                     height="100%">
                     <s:VGroup verticalAlign="middle" horizontalAlign="center" 
                        width="100%" height="100%">
                        <s:Label text="Contents for Section 1"/>	
                     </s:VGroup>							
                  </s:NavigatorContent>
                  <s:NavigatorContent label="Section 2" width="100%" 
                     height="100%">
                     <s:VGroup verticalAlign="middle" horizontalAlign="center"
                        width="100%" height="100%">
                        <s:Label text="Contents for Section 2"/>	
                     </s:VGroup>							
                  </s:NavigatorContent>
                  <s:NavigatorContent label="Section 3" width="100%" 
                     height="100%">
                     <s:VGroup verticalAlign="middle" horizontalAlign="center" 
                        width="100%" height="100%">
                        <s:Label text="Contents for Section 3"/>	
                     </s:VGroup>							
                  </s:NavigatorContent>
                  <s:NavigatorContent label="Section 4" width="100%" 
                     height="100%">
                     <s:VGroup verticalAlign="middle" horizontalAlign="center" 
                        width="100%" height="100%">
                        <s:Label text="Contents for Section 4"/>	
                     </s:VGroup>							
                  </s:NavigatorContent>
               </mx:Accordion>
            </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

準(zhǔn)備好所有更改后,讓我們以正常模式編譯和運(yùn)行應(yīng)用程序,就像在 Flex - 創(chuàng)建應(yīng)用程序中一樣 章節(jié)。 如果一切順利,您的應(yīng)用程序,這將產(chǎn)生以下結(jié)果:[在線試用]

Flex Accordian Control
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號