ecサイト|eコマース|パッケージ|アクセス解析|広告効果測定|Webマーケティング構築・開発

All Close Accordion

Accordionを使った事のある人なら一度は考えた事があるかも知れません。
全てのヘッダを閉じるAccordionです。
Accordionでは、いずれかのヘッダが必ず選択されている状態になり、全てを閉じる事は出来ません。
以下のサンプルではAccordionを継承したカスタムクラスにて、全てのヘッダが閉じている様に見える状態を擬似的に作り出しています。
AccordionCustom.as
PLAIN TEXT
CODE:

package io.mx.containers {

 

import flash.events.TimerEvent;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.utils.Timer;

import mx.core.Container;

import mx.core.IDataRenderer;

import mx.containers.Accordion;

import mx.containers.accordionClasses.AccordionHeader;

import mx.containers.Canvas;

import mx.controls.Button;

import mx.events.ChildExistenceChangedEvent;

import mx.events.EffectEvent;

import mx.events.IndexChangedEvent;

import mx.effects.Move;

 

public class AccordionCustom extends Accordion {

 

private var indexChanged:Boolean = false;

private var csSelectIndex:int = 0;

private var dummyHeader:Boolean = false;

 

function AccordionCustom():void {

super();

 

addEventListener(MouseEvent.CLICK, clickHandler);

addEventListener(IndexChangedEvent.CHANGE, headerChangeHandler);

 

}

 

private function clickHandler(event:Event):void {

if (event.target is AccordionHeader) {

if ((csSelectIndex == super.selectedIndex) && ! indexChanged) {

allClose();

}

}

 

indexChanged = false;

}

 

private [...]

記事へ