Flex中通过selectionDuration样式实现List控件中项目选中延迟效果的例子

By Minidxer | July 31, 2008

和前面的Flex中通过openDuration和closeDuration样式改变ComboBox控件打开/关闭下拉菜单时延迟效果的例子类似的，接下来的例子演示了Flex中通过selectionDuration样式，实现List控件中项目选中延迟效果。移动游标调整延迟时间的长短。

让我们先来看一下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:Array id="arr">
  8.         <mx:Object label="One" />
  9.         <mx:Object label="Two" />
  10.         <mx:Object label="Three" />
  11.         <mx:Object label="Four" />
  12.         <mx:Object label="Five" />
  13.         <mx:Object label="Six" />
  14.         <mx:Object label="Seven" />
  15.         <mx:Object label="Eight" />
  16.         <mx:Object label="Nine" />
  17.         <mx:Object label="Ten" />
  18.     </mx:Array>
  19.  
  20.     <mx:ApplicationControlBar dock="true">
  21.         <mx:Form styleName="plain" indicatorGap="0">
  22.             <mx:FormItem label="selectionDuration:">
  23.                 <mx:HSlider id="slider"
  24.                         minimum="0"
  25.                         maximum="2000"
  26.                         value="250"
  27.                         snapInterval="1"
  28.                         tickInterval="100"
  29.                         dataTipPrecision="0"
  30.                         liveDragging="true" />
  31.             </mx:FormItem>
  32.         </mx:Form>
  33.     </mx:ApplicationControlBar>
  34.  
  35.     <mx:List id="list"
  36.             dataProvider="{arr}"
  37.             selectionDuration="{slider.value}"
  38.             width="200"
  39.             selectionColor="red" />
  40.  
  41. </mx:Application>
下面是实现同样功能的ActionScript版本：
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.         initialize="init();">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.containers.ApplicationControlBar;
  11.             import mx.containers.Form;
  12.             import mx.containers.FormItem;
  13.             import mx.controls.HSlider;
  14.             import mx.controls.List;
  15.             import mx.controls.sliderClasses.Slider;
  16.             import mx.events.SliderEvent;
  17.  
  18.             private var arr:Array;
  19.             private var slider:HSlider;
  20.             private var list:List;
  21.  
  22.             private function init():void {
  23.                 arr = [];
  24.                 arr.push({label:"One"});
  25.                 arr.push({label:"Two"});
  26.                 arr.push({label:"Three"});
  27.                 arr.push({label:"Four"});
  28.                 arr.push({label:"Five"});
  29.                 arr.push({label:"Six"});
  30.                 arr.push({label:"Seven"});
  31.                 arr.push({label:"Eight"});
  32.                 arr.push({label:"Nine"});
  33.                 arr.push({label:"Ten"});
  34.  
  35.                 slider = new HSlider();
  36.                 slider.minimum = 0;
  37.                 slider.maximum = 2000;
  38.                 slider.value = 250;
  39.                 slider.snapInterval = 1;
  40.                 slider.tickInterval = 100;
  41.                 slider.liveDragging = true;
  42.                 slider.setStyle("dataTipPrecision", 0);
  43.                 slider.addEventListener(SliderEvent.CHANGE, slider_change);
  44.  
  45.                 var formItem:FormItem = new FormItem();
  46.                 formItem.label = "selectionDuration:";
  47.                 formItem.addChild(slider);
  48.  
  49.                 var form:Form = new Form();
  50.                 form.styleName = "plain";
  51.                 form.setStyle("indicatorGap", 0);
  52.                 form.addChild(formItem);
  53.  
  54.                 var appControlBar:ApplicationControlBar;
  55.                 appControlBar = new ApplicationControlBar();
  56.                 appControlBar.dock = true;
  57.                 appControlBar.addChild(form);
  58.                 Application.application.addChildAt(appControlBar, 0);
  59.  
  60.                 list = new List();
  61.                 list.dataProvider = arr;
  62.                 list.width = 200;
  63.                 list.setStyle("selectionColor", "red");
  64.                 addChild(list);
  65.             }
  66.  
  67.             private function slider_change(evt:SliderEvent):void {
  68.                 list.setStyle("selectionDuration", evt.value);
  69.             }
  70.         ]]>
  71.     </mx:Script>
  72.  
  73. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | No Comments » | Tags: , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll