自定义FLEX滚动条滑块样式

在Flex里我们可以使用downArrowSkin,upArrowSkin,trackSkin,thumbSkin方法的设置滚动条的样式.. 不过由于设计的关系.. 滚动条的thumbSkin常设置成一个"点"或一个"块".. 这个块是固定大小的..不像Flex自带的滚动条会随滚动区域的高度而改变.. 如果直接设置thumbSkin,那滑块将拉变形~非常难看.. 这时候我们可以使用verticalScrollBar里的setScrollProperties方法来调整滑块高度..

    1.public function setScrollProperties(pageSize:Number, minScrollPosition:Number, maxScrollPosition:Number, pageScrollSize:Number = 0):void

代码如下:
自定义MyTextArea(为了调用protected的verticalScrollBar)

查看源码 打印 关于此插件

01. package

02. {

03.      import flash.events.Event;

04.        

05.      import mx.controls.TextArea;

06.      import mx.events.FlexEvent;

07.    

08.      public class MyTextArea extends TextArea

09.      {

10.          public function MyTextArea()

11.          {

12.              super ();

13.          }

14.          //每次刷新滚动条时调用一次setScrollProperties,设置pageSize为0

15.          override protected function setScrollBarProperties(totalColumns: int , visibleColumns: int , totalRows: int , visibleRows: int ): void  

16.          {

17.              super .setScrollBarProperties(totalColumns,visibleColumns,totalRows,visibleRows);

18.              if (verticalScrollBar)verticalScrollBar.setScrollProperties( 0 ,verticalScrollBar.minScrollPosition,verticalScrollBar.maxScrollPosition, 0 );

19.          }

20.      }

21. }

主MXML

查看源码 打印 关于此插件

01. <?xml version= "1.0" encoding= "utf-8" ?>

02. <mx:Application xmlns:mx= "http://www.adobe.com/2006/mxml " layout= "absolute" applicationComplete= "init()" xmlns:local= "*" width= "500" height= "400" fontSize= "12" >

03.      <mx:Style>

04.          .myTextArea

05.          {

06.              downArrowSkin: Embed(source= "down.png" );

07.              upArrowSkin: Embed(source= "up.png" );

08.              trackSkin: Embed(source= "track.png" ,scaleGridTop= "20" ,scaleGridLeft= "7" ,scaleGridRight= "9" ,scaleGridBottom= "80" );

09.              thumbSkin: Embed(source= "thumb.png" );

10.          }

11.      </mx:Style>

12.      <mx:Script>

13.          <![CDATA[

14.              [Bindable]

15.              private var content: String = "" ;

16.              private function init(): void

17.              {

18.                  for ( var i: uint = 0 ;i< 50 ;i++)content+= "/n L4cd.Net 简单工作 /n" ;

19.              }

20.          ]]>

21.      </mx:Script>

22.      <local:MyTextArea text= "{content}" verticalScrollBarStyleName= "myTextArea" verticalScrollPolicy= "on" borderStyle= "none" borderThickness= "1" width= "235" x= "10" height= "352" y= "38" />

23.      <mx:TextArea text= "{content}" verticalScrollBarStyleName= "myTextArea" verticalScrollPolicy= "on" borderStyle= "none" borderThickness= "1" height= "352" y= "38" width= "235" x= "255" />

24.      <mx:Label x= "10" y= "10" text= "自定义TextArea" />

25.      <mx:Label x= "255" y= "10" text= "默认TextArea" />

26. </mx:Application>

链接地址：http://l4cd.net/blog/post-old-141.html