Flex中通过调用autoRepeat属性和buttonDown事件创建一个自动重复用户按下时动作按钮(Button)的例子
By Minidxer | July 19, 2008
接下来的例子演示了Flex中通过调用autoRepeat属性和buttonDown事件,创建一个自动重复用户按下时动作按钮(Button)。比较拗口,简单的说就是用户按下鼠标,并且保持按下状态,该按钮一直执行鼠标按下时的动作,直到结束。
让我们先来看一下Demo(可以右键View Source或点击这里察看源代码):
下面是完整代码(或点击这里察看):
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white">
- <mx:Script>
- <![CDATA[
- import mx.core.UIComponent;
- private function moveLeft(target:UIComponent):void {
- var t1:int = target.x - 10;
- var t2:int = 0;
- target.x = Math.max(t1, t2);
- }
- private function moveRight(target:UIComponent):void {
- var t1:int = target.x + 10;
- var t2:int = Application.application.width - target.width;
- target.x = Math.min(t1, t2);
- }
- ]]>
- </mx:Script>
- <mx:Box id="box" width="100" height="100" backgroundColor="red" />
- <mx:HBox>
- <mx:Button id="leftButton"
- label="left"
- autoRepeat="true"
- repeatDelay="{button_repeatDelay.value}"
- repeatInterval="{button_repeatInterval.value}"
- buttonDown="moveLeft(box)" />
- <mx:Button id="rightButton"
- label="right"
- autoRepeat="true"
- repeatDelay="{button_repeatDelay.value}"
- repeatInterval="{button_repeatInterval.value}"
- buttonDown="moveRight(box)" />
- </mx:HBox>
- <mx:Form>
- <mx:FormItem label="repeatDelay ({button_repeatDelay.value}):">
- <mx:HSlider id="button_repeatDelay"
- minimum="50"
- maximum="950"
- value="100"
- snapInterval="50"
- tickInterval="100"
- dataTipPrecision="0" />
- </mx:FormItem>
- <mx:FormItem label="repeatInterval ({button_repeatInterval.value}):">
- <mx:HSlider id="button_repeatInterval"
- minimum="10"
- maximum="910"
- value="10"
- snapInterval="10"
- tickInterval="100"
- dataTipPrecision="0" />
- </mx:FormItem>
- </mx:Form>
- </mx:Application>
代码:Peter deHaan 翻译/整理/编译:minidxer
Topics:
Flex |
No Comments » |
Tags: autoRepeat, Button, buttonDown, repeatDelay, repeatInterval, 按钮