Flash組件教程——Flex組件篇：HSlider和VSlider

Flex提供了水平和垂直兩種滑動杆。
基本使用方法：

01 : mx:HSlider 創建水平滑動杆
02 : mx:VSlider 創建垂直滑動杆
03 : 設置滑動範圍：minimum和 maximum屬性
04 : 設置滑桿的初始值：value屬性
05 : 設置最小滑動間隔爲可以設置snapInterval屬性（如snapInterval='2'）
06 : 創建滑桿的標籤可以用labels數組（Flex會均分顯示標籤位置）
07 : 默認創建的滑動杆都有ToolTip，需要禁止可使用：showToolTip='false'
08 : 如果需要每隔一段距離顯示標記，可以設置tickInterval屬性（如tickInterval='25'）
09 : 可以同時使用兩個箭頭標記：thumbCount（1或2，默認值爲1）
10 : 使用雙箭頭的時候設置初始值需要用values數組（如values='[ 20 , 80 ]'）
11 : 可以利用鍵盤的左右（或上下）方向鍵來移動滑桿
12 : HOME鍵和END鍵（或PageDown和PageUp鍵）分別定位到最小值和最大值

滑桿的change事件

1: <mx:Script>
2: <![CDATA[
3: function sliderChange(event:Object)
4: {
5: thumb.text=event.target.value;
6: }
7: ]]>
8: </mx:Script>
9: <mx:Panel>
10: <mx:HSlider change=’sliderChange(event)’ />
11: <mx:TextArea id=’thumb’ />
12: </mx:Panel>

默認，只有當釋放滑桿的時候，change事件纔會響應，所以上面的例子TextArea框中的值只有釋放滑桿的時候纔會變化。如果設置liveDragging屬性爲True的話，就可以做到拖動滑桿的時候就可以響應change事件了。

1: <mx:Script>
2: <![CDATA[
3: function sliderChangeLive(event:Object)
4: {
5: thumbLive.text=event.target.value;
6: }
7: ]]>
8: </mx:Script>
9: <mx:Panel>
10: <mx:HSlider liveDragging=’true’ change=’sliderChangeLive(event)’ />
11: <mx:TextArea id=’thumbLive’ />
12: </mx:Panel>

使用2個滑桿
下面的例子很好的演示瞭如何兩個滑桿，請注意thumbIndex屬性的用法

1: <mx:Application xmlns:mx=’http://www.macromedia.com/2003/mxml’ >
2: <mx:Script>
3: <![CDATA[
4: function sliderChangeTwo(event:Object)
5: {
6: thumbTwoA.text=event.target.values[0];
7: thumbTwoB.text=event.target.values[1];
8: thumbIndex.text=event.thumbIndex;
9: }
10: ]]>
11: </mx:Script>
12: <mx:Panel>
13: <mx:HSlider thumbCount=’2’ change=’sliderChangeTwo(event)’ />
14: <mx:TextInput id=’thumbTwoA’ />
15: <mx:TextInput id=’thumbTwoB’ />
16: <mx:TextInput id=’thumbIndex’ />
17: </mx:Panel>
18: </mx:Application>

定製ToolTip
默認的提示框會顯示當前的值，我們可以自定義自己的提示信息，看下面的例子。

1: <mx:Script>
2: <![CDATA[
3: function myToolTipFunc(val:String):String
4: {
5: return ’Current value: ’ + val;
6: }
7: ]]>
8: </mx:Script>
9: <mx:Panel>
10: <mx:HSlider toolTipFormatFunction=’myToolTipFunc’ />
11: </mx:Panel>