我想在我的应用程序中创建一个水平列表,它将显示图像。虽然这非常简单,但我希望图像打开一个弹性警报框(内置一个)并显示一些文本。例如,我将有一个.NET徽标的图像,我将在某处输入一些文本(如在集合中),此文本将显示在警告框中。
我怎么能这样做?似乎没有用于单击弹性水平列表中的项目成员的事件处理程序?
由于
答案 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文档)以检索选择了哪个项目。有意义吗?