Flex中如何通过textAlign样式控制Accordion头部文本排列方向的例子

By Minidxer | September 20, 2008

在前面的Flex中如何根据Accordion容器内项目调整宽度的例子中，我们了解了Flex中如何根据Accordion容器内项目调整宽度。 接下来的例子演示了Flex中如何通过textAlign样式,控制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:Style>
  9.         .MyHeaderStyle {
  10.             color: haloBlue;
  11.             fontWeight: bold;
  12.             textAlign: left;
  13.             textRollOverColor: haloOrange;
  14.             textSelectedColor: black;
  15.             icon: Embed(source="assets/asterisk_orange.png");
  16.         }
  17.     </mx:Style>
  18.  
  19.     <mx:Script>
  20.         <![CDATA[
  21.             import mx.events.IndexChangedEvent;
  22.             import mx.events.ListEvent;
  23.  
  24.             private function init():void {
  25.                 comboBox.dataProvider = accordion.getChildren()
  26.             }
  27.  
  28.             private function comboBox_change(evt:ListEvent):void {
  29.                 accordion.selectedIndex = comboBox.selectedIndex;
  30.             }
  31.  
  32.             private function accordion_change(evt:IndexChangedEvent):void {
  33.                 comboBox.selectedIndex = accordion.selectedIndex;
  34.             }
  35.  
  36.             private function changeTextAlign(evt:ListEvent):void {
  37.                 var cssDecl:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".MyHeaderStyle");
  38.                 cssDecl.setStyle("textAlign", evt.currentTarget.selectedItem);
  39.                 StyleManager.setStyleDeclaration(".MyHeaderStyle", cssDecl, false);
  40.             }
  41.         ]]>
  42.     </mx:Script>
  43.  
  44.     <mx:ApplicationControlBar dock="true">
  45.         <mx:Label text="Selected child:" />
  46.         <mx:ComboBox id="comboBox"
  47.                 change="comboBox_change(event);">
  48.         </mx:ComboBox>
  49.  
  50.         <mx:Spacer width="50" />
  51.  
  52.         <mx:Label text="textAlign:" />
  53.         <mx:ComboBox change="changeTextAlign(event)">
  54.             <mx:dataProvider>
  55.                 <mx:String>left</mx:String>
  56.                 <mx:String>center</mx:String>
  57.                 <mx:String>right</mx:String>
  58.             </mx:dataProvider>
  59.         </mx:ComboBox>
  60.     </mx:ApplicationControlBar>
  61.  
  62.     <mx:Accordion id="accordion"
  63.             headerStyleName="MyHeaderStyle"
  64.             themeColor="haloSilver"
  65.             width="100%"
  66.             height="100%"
  67.             change="accordion_change(event);">
  68.         <mx:VBox label="One" />
  69.         <mx:VBox label="Two" />
  70.         <mx:VBox label="Three" />
  71.         <mx:VBox label="Four" />
  72.         <mx:VBox label="Five" />
  73.     </mx:Accordion>
  74.  
  75. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads