May 31

Flex中通过自定义Accordion容器头部来阻止用户点击Accordion容器头部的例子

FlexAdd comments

接下来的例子演示了Flex中通过自定义Accordion容器头部，来阻止用户点击Accordion容器头部。例子中使用MyAccHeader中将mouseEnabled属性设置为flash来自定义头部，从而阻止用户点击Accordion容器头部。用户可以点击next和previous来切换选中的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.             private function prevChild():void {
  10.                 accordion.selectedIndex--;
  11.             }
  12.  
  13.             private function nextChild():void {
  14.                 accordion.selectedIndex++;
  15.             }
  16.         ]]>
  17.     </mx:Script>
  18.  
  19.     <mx:Accordion id="accordion"
  20.             headerRenderer="comps.MyAccHeader"
  21.             width="100%" height="100%">
  22.         <mx:VBox id="v1" label="One" width="100%" height="100%">
  23.             <mx:VBox width="100%" height="100%">
  24.                 <mx:Label text="One" />
  25.             </mx:VBox>
  26.             <mx:ControlBar horizontalAlign="right" width="100%">
  27.                 <mx:Spacer width="100%" />
  28.                 <mx:Button label="next" click="nextChild();" />
  29.             </mx:ControlBar>
  30.         </mx:VBox>
  31.         <mx:VBox id="v2" label="Two" width="100%" height="100%">
  32.             <mx:VBox width="100%" height="100%">
  33.                 <mx:Label text="Two" />
  34.             </mx:VBox>
  35.             <mx:ControlBar width="100%">
  36.                 <mx:Button label="prev" click="prevChild();" />
  37.                 <mx:Spacer width="100%" />
  38.                 <mx:Button label="next" click="nextChild();" />
  39.             </mx:ControlBar>
  40.         </mx:VBox>
  41.         <mx:VBox id="v3" label="Three" width="100%" height="100%">
  42.             <mx:VBox width="100%" height="100%">
  43.                 <mx:Label text="Three" />
  44.             </mx:VBox>
  45.             <mx:ControlBar width="100%">
  46.                 <mx:Button label="prev" click="prevChild();" />
  47.                 <mx:Spacer width="100%" />
  48.                 <mx:Button label="next" click="nextChild();" />
  49.             </mx:ControlBar>
  50.         </mx:VBox>
  51.         <mx:VBox id="v4" label="Four" width="100%" height="100%">
  52.             <mx:VBox width="100%" height="100%">
  53.                 <mx:Label text="Four" />
  54.             </mx:VBox>
  55.             <mx:ControlBar width="100%">
  56.                 <mx:Button label="prev" click="prevChild();" />
  57.                 <mx:Spacer width="100%" />
  58.                 <mx:Button label="next" click="nextChild();" />
  59.             </mx:ControlBar>
  60.         </mx:VBox>
  61.         <mx:VBox id="v5" label="Five" width="100%" height="100%">
  62.             <mx:VBox width="100%" height="100%">
  63.                 <mx:Label text="Five" />
  64.             </mx:VBox>
  65.             <mx:ControlBar width="100%">
  66.                 <mx:Button label="prev" click="prevChild();" />
  67.                 <mx:Spacer width="100%" />
  68.             </mx:ControlBar>
  69.         </mx:VBox>
  70.     </mx:Accordion>
  71.  
  72. </mx:Application>
下面就是自定义头部代码：
Download: MyAccHeader.as
  1. package comps {
  2.     import mx.containers.accordionClasses.AccordionHeader;
  3.  
  4.     public class MyAccHeader extends AccordionHeader {
  5.         public function MyAccHeader() {
  6.             super();
  7.             mouseEnabled = false;
  8.         }
  9.     }
  10. }
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , , ,

Related Post

One Response to “Flex中通过自定义Accordion容器头部来阻止用户点击Accordion容器头部的例子”

Trackbacks

Leave a Reply