Flex中如何在List控件拖动时显示tips的例子

By Minidxer | March 29, 2008

接下来的例子显示了如何通过设置showScrollTips属性在Flex的List控件拖动时显示一个tips。另外你还可以使用scrollTipFunction属性设定自定义的scroll tip函数，来显示自定义格式的tip文本。

让我们先来看一下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:Script>
  8.         <![CDATA[
  9.             import mx.controls.scrollClasses.ScrollBarDirection;
  10.             import mx.utils.StringUtil;
  11.  
  12.             private function list_scrollTipFunc(dir:String, pos:Number):String {
  13.                 var pct:Number = pos / list.maxVerticalScrollPosition;
  14.                 return StringUtil.substitute("{0} / {1} ({2}%)",
  15.                         pos, // current
  16.                         list.maxVerticalScrollPosition, // max
  17.                         numberFormatter.format(pct * 100) // percent
  18.                     );
  19.             }
  20.         ]]>
  21.     </mx:Script>
  22.  
  23.     <mx:NumberFormatter id="numberFormatter" precision="0" />
  24.  
  25.     <mx:Array id="arr">
  26.         <mx:Object label="Accordion" />
  27.         <mx:Object label="ApplicationControlBar" />
  28.         <mx:Object label="Box" />
  29.         <mx:Object label="Canvas" />
  30.         <mx:Object label="ControlBar" />
  31.         <mx:Object label="DividedBox" />
  32.         <mx:Object label="Form" />
  33.         <mx:Object label="FormHeading" />
  34.         <mx:Object label="FormItem" />
  35.         <mx:Object label="Grid" />
  36.         <mx:Object label="HBox" />
  37.         <mx:Object label="HDividedBox" />
  38.         <mx:Object label="Panel" />
  39.         <mx:Object label="TabNavigator" />
  40.         <mx:Object label="Tile" />
  41.         <mx:Object label="TitleWindow" />
  42.         <mx:Object label="VBox" />
  43.         <mx:Object label="VDividedBox" />
  44.         <mx:Object label="ViewStack" />
  45.     </mx:Array>
  46.  
  47.     <mx:ApplicationControlBar dock="true">
  48.         <mx:CheckBox id="checkBox"
  49.                 label="showScrollTips:"
  50.                 labelPlacement="left"
  51.                 selected="true" />
  52.     </mx:ApplicationControlBar>
  53.  
  54.     <mx:List id="list"
  55.             dataProvider="{arr}"
  56.             rowCount="6"
  57.             showScrollTips="{checkBox.selected}"
  58.             scrollTipFunction="list_scrollTipFunc"
  59.             verticalScrollPolicy="on" />
  60.  
  61. </mx:Application>
原文作者：Peter deHaan 翻译：minidxer

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

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll