制作包含可点击图像的水平列表作为成员

时间:2009-01-08 17:40:35

标签: flex

我想在我的应用程序中创建一个水平列表,它将显示图像。虽然这非常简单,但我希望图像打开一个弹性警报框(内置一个)并显示一些文本。例如,我将有一个.NET徽标的图像,我将在某处输入一些文本(如在集合中),此文本将显示在警告框中。

我怎么能这样做?似乎没有用于单击弹性水平列表中的项目成员的事件处理程序?

由于

3 个答案:

答案 0 :(得分:1)

<?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" minWidth="955" minHeight="600" >

    <fx:Declarations>
        <s:Sine id="sineEasing"
                easeInFraction="0.3"/>
        <s:Power id="powerEasing"
                 exponent="8"/>

        <s:Animate id="anim" duration="500"  
                   effectStart="{trace('start');lock=true}"
                   effectEnd="{trace('end');lock=false}"
                   target='{viewport}' easer="{powerEasing}"  >
            <s:motionPaths>
                <s:SimpleMotionPath id="pth" property="horizontalScrollPosition"  />
            </s:motionPaths>
        </s:Animate>
        <s:ArrayCollection id="mydata3">
            <fx:String >page 1</fx:String>
            <fx:String >page 2</fx:String>
            <fx:String >page 3</fx:String>
            <fx:String >page 4</fx:String>
            <fx:String >page 5</fx:String>
            <fx:String >page 6</fx:String>
            <fx:String >page 7</fx:String>
            <fx:String >page 8</fx:String>
            <fx:String >page 9</fx:String>
            <fx:String >page 10</fx:String>
            <fx:String >page 11</fx:String>
            <fx:String >page 12</fx:String>
            <fx:String >page 13</fx:String>
            <fx:String >page 14</fx:String>


        </s:ArrayCollection>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.DragEvent;
            import mx.events.FlexEvent;

            import spark.events.IndexChangeEvent;

            private const FUDGE_FACTOR:Number = 0.5;

            [Bindable] private var lock:Boolean= false;

            [Bindable] private var viewport ;
            [Bindable] private var max:int;
            [Bindable]protected var lstData:ArrayCollection = new ArrayCollection([
                {label:"mmm",source:"images/DSC_0002.JPG"},
                {label:"nxt",source:"images/DSC_0003.JPG"},
                {label:"nxt3",source:"images/DSC_0008.JPG"},
                {label:"nxt3",source:"images/DSC_0009.JPG"},
                {label:"nxt3",source:"images/DSC_0010.JPG"},
                {label:"mmm",source:"images/DSC_00011.JPG"},
                {label:"mmm",source:"images/DSC_0011.JPG"},
                {label:"nxt3",source:"images/DSC_0012.JPG"},
                {label:"mmm",source:"images/DSC_0013.JPG"},
                {label:"nxt3",source:"images/DSC_0014.JPG"},
                {label:"mmm",source:"images/DSC_0015.JPG"},
                {label:"mmm",source:"images/DSC_0016.JPG"},
                ]);
            private function fudgeMouseWheel( event:MouseEvent ):void
            {
                trace('list.scroller.horizontalScrollBar.value'+list.scroller.horizontalScrollBar.value);
                event.delta *= FUDGE_FACTOR;    
                if( event.delta >0){
                    //list.scroller.viewport.horizontalScrollPosition+=250;
                    if(!lock)  next();
                }else{
                    //list.scroller.viewport.horizontalScrollPosition-=250;
                    if(!lock)  prev();
                }
                //trace('delta'+event.delta);
            } 


            protected function list1_creationCompleteHandler(event:FlexEvent):void
            {
                this.viewport = list.scroller.viewport;
                list.scroller.horizontalScrollBar.addEventListener(Event.CHANGE, drag_handler);
                this.addEventListener( MouseEvent.MOUSE_WHEEL, fudgeMouseWheel, true );
                trace('list.scroller.viewport.contentWidth '+list.scroller.viewport.contentWidth );
                max=list.scroller.viewport.contentWidth-250;
                trace('max: '+ max);

            }
            private function drag_handler(e):void
            {
                trace('drag:'+list.scroller.horizontalScrollBar.value);
            }

            [Bindable] private var currentPos:int;


            protected function next():void
            {
                currentPos = list.scroller.viewport.horizontalScrollPosition;
                pth.valueTo = currentPos+250;
                pth.valueFrom = currentPos;
                anim.play();
                scrollbar.value += 250;
                tempSliderPos += 250;
            }

            private function prev():void
            {
                currentPos = list.scroller.viewport.horizontalScrollPosition;
                pth.valueTo = currentPos-250;
                pth.valueFrom = currentPos;
                anim.play();    
                scrollbar.value -= 250;
                tempSliderPos -= 250;
            }

            private var tempSliderPos:int=0;



            private function change( e ):void
            {
                //trace('e.target.value');
                /* if( e.target.value > tempSliderPos  )
                {
                pth.valueTo = tempSliderPos+250;
                pth.valueFrom = tempSliderPos;
                anim.play();    
                tempSliderPos+=250;

                }else{
                pth.valueTo = tempSliderPos-250;
                pth.valueFrom = tempSliderPos;
                anim.play();    
                tempSliderPos-=250;

                }  */

                /*  if( e.target.value > tempSliderPos  )
                {

                //if(!lock) next();
                pth.valueTo = tempSliderPos+250;
                pth.valueFrom = tempSliderPos;
                anim.play();    

                tempSliderPos+=250;

                }else{
                //if(!lock) prev();
                pth.valueTo = tempSliderPos-250;
                pth.valueFrom = tempSliderPos;
                anim.play();    
                tempSliderPos-=250;

                }*/

                //trace(e.target.value);
            }




            protected function scrollbar_changeStartHandler(event:FlexEvent):void
            {
                //trace('start')
            }


            protected function scrollbar_changeEndHandler(e:Event):void
            {
                Event as FlexEvent;
                if( e.target.value > tempSliderPos  )
                {
                    trace('tempSliderPos '+tempSliderPos+' e.target.value '+e.target.value)
                    //if(!lock) next();
                    pth.valueTo = e.target.value;
                    pth.valueFrom = tempSliderPos;
                    anim.play();    

                    tempSliderPos = e.target.value;

                }else{
                    trace('tempSliderPos '+tempSliderPos+' e.target.value '+e.target.value)
                    //if(!lock) prev();
                    pth.valueTo = e.target.value;
                    pth.valueFrom = tempSliderPos;
                    anim.play();    
                    tempSliderPos = e.target.value;

                }
            }

        ]]>
    </fx:Script>

    <!--<mx:HorizontalList id='list' 
                       width="250" height="281" 
                                dataProvider='{lstData}'
                                itemRenderer="list_item" 
                                x="216" y="48" 
                                creationComplete="list1_creationCompleteHandler(event)">
        </mx:HorizontalList>-->


    <s:List id='list' skinClass="ListSkin" width="250" height="281" 
            dataProvider='{lstData}'
            itemRenderer="list_item" x="216" y="48" creationComplete="list1_creationCompleteHandler(event)">

    </s:List> 

    <s:HScrollBar id='scrollbar'   changeStart="scrollbar_changeStartHandler(event)"
                  changeEnd="scrollbar_changeEndHandler(event)"
                  stepSize="250"

                  width="250" minimum="0" maximum="{max}" x="216" y="382" change="{change(event)}" 
    snapInterval="250" />

</s:Application>

答案 1 :(得分:0)

只需向图像添加事件处理程序

即可

答案 2 :(得分:0)

如果您正在询问如何捕获列表中项目的选择,则可以使用许多事件:itemClick,itemDoubleClick,change:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="this_initialize()" creationComplete="this_creationComplete()">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ListEvent;
            import mx.collections.ArrayCollection;

            [Bindable]
            private var images:Array;

            private function this_initialize():void
            {
                images = new Array();
                images.push("myimage1.jpg");
                images.push("myimage2.jpg");
                images.push("myimage3.jpg");
                images.push("myimage4.jpg");
                images.push("myimage5.jpg");
            }

            private function this_creationComplete():void
            {

            }

            private function list_itemClick(event:ListEvent):void
            {
                Alert.show(event.currentTarget.selectedItem as String);
            }

        ]]>
    </mx:Script>

    <mx:HorizontalList id="list" dataProvider="{images}" itemClick="list_itemClick(event)">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Image source="{data}" />
            </mx:Component>
        </mx:itemRenderer>
    </mx:HorizontalList>

</mx:Application>

这就是你问的问题吗?您只需要挂钩其中一个列表事件(有关详细信息,请参阅Flex文档)以检索选择了哪个项目。有意义吗?