Flex中如何通过scrollTips和scrollTipFunction属性自定义HorizontalList的滚动条提示栏的例子

By Minidxer | January 31, 2009

接下来的例子演示了Flex中如何通过scrollTips和scrollTipFunction属性，自定义HorizontalList的滚动条提示栏。

让我们先来看一下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:Style>
  8.         ToolTip {
  9.             backgroundColor: haloBlue;
  10.             color: white;
  11.             fontWeight: bold;
  12.         }
  13.     </mx:Style>
  14.  
  15.     <mx:Array id="arr">
  16.         <mx:Object label="Accordion" />
  17.         <mx:Object label="ApplicationControlBar" />
  18.         <mx:Object label="Box" />
  19.         <mx:Object label="Canvas" />
  20.         <mx:Object label="ControlBar" />
  21.         <mx:Object label="DividedBox" />
  22.         <mx:Object label="Form" />
  23.         <mx:Object label="FormHeading" />
  24.         <mx:Object label="FormItem" />
  25.         <mx:Object label="Grid" />
  26.         <mx:Object label="HBox" />
  27.         <mx:Object label="HDividedBox" />
  28.         <mx:Object label="Panel" />
  29.         <mx:Object label="TabNavigator" />
  30.         <mx:Object label="Tile" />
  31.         <mx:Object label="TitleWindow" />
  32.         <mx:Object label="VBox" />
  33.         <mx:Object label="VDividedBox" />
  34.         <mx:Object label="ViewStack" />
  35.     </mx:Array>
  36.  
  37.     <mx:Script>
  38.         <![CDATA[
  39.             import mx.controls.listClasses.TileBaseDirection;
  40.  
  41.             private function horizontalList_scrollTipFunc(direction:String, position:Number):String {
  42.                 var str:String;
  43.                 var max:Number;
  44.                 var pct:String;
  45.  
  46.                 switch (direction) {
  47.                     case TileBaseDirection.HORIZONTAL:
  48.                         max = horizontalList.maxHorizontalScrollPosition;
  49.                         break;
  50.                     case TileBaseDirection.VERTICAL:
  51.                         max = horizontalList.maxVerticalScrollPosition;
  52.                         break;
  53.                 }
  54.  
  55.                 pct = numberFormatter.format(position / max * 100);
  56.                 str = position + " of " + max + " (" + pct + "%)";
  57.  
  58.                 return str;
  59.             }
  60.         ]]>
  61.     </mx:Script>
  62.  
  63.     <mx:NumberFormatter id="numberFormatter" precision="0" />
  64.  
  65.     <mx:HorizontalList id="horizontalList"
  66.             dataProvider="{arr}"
  67.             columnWidth="175"
  68.             columnCount="3"
  69.             rowCount="1"
  70.             rowHeight="100"
  71.             showScrollTips="true"
  72.             scrollTipFunction="horizontalList_scrollTipFunc" />
  73.  
  74. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: HorizontalList | 1 Comment » | Tags: ,

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

One comment | Add One

  1. qq2009 - 02/1/2009 at 10:42 am

    汗，不小心点了下ggad广告，囧

    博主的博客很专业

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll