Flex组件篇:HSlider和VSlider

原创 2006年05月25日 18:25:00

Flex提供了水平和垂直两种滑动杆。
基本使用方法:

: 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 : 可以同时使用两个箭头标记:thumbCount12,默认值为1
10 : 使用双箭头的时候设置初始值需要用values数组(如values='[ 20 , 80 ]'
11 : 可以利用键盘的左右(或上下)方向键来移动滑杆
12 : HOME键和END键(或PageDownPageUp键)分别定位到最小值和最大值

 

01



滑杆的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>

 


Flash组件教程——Flex组件篇:HSlider和VSlider

Flex提供了水平和垂直两种滑动杆。 基本使用方法:01 : mx:HSlider 创建水平滑动杆02 : mx:VSlider 创建垂直滑动杆03 : 设置滑动范围:minimum和 ...
  • gbanana
  • gbanana
  • 2011年05月16日 22:28
  • 769

flex4 hslider和vslider滑条高亮

在flex3中滑条高亮有个属性 showTrackHighlight="true"; 但是在flex4中不知道什么原因没有 后来在网上翻到一个别人重写的滑块组件 效果图如下: Hslider.as...
  • soanl
  • soanl
  • 2014年03月12日 17:54
  • 2011

flex自定义spark-VSlider

首先自定义一个Vslider类继承spark.components.VSlider,代码如下: package com.dtsola.base { import com.dtsola.log.Dt...

flex控制音量 slider hslider 注释全

"1.0" encoding="utf-8"?>   "http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="myIn...

flex NumericStepper HSlider flex 教程 flex培训 flex源码 flex实例

flex 中的一些数据控件

【Flex4.6】TabBar组件运用【华丽篇】

flex flex组件 TabBar组件运用,导航组件的切换
  • dlamwz
  • dlamwz
  • 2015年09月06日 00:14
  • 276

浅淡FLEX spark组件-容器篇

前台什么的做多了,对做FLEX有些排斥,但这样很不好。既然决定想做游戏了,那只能继续下去。 于是我又装上了UBUNTU,花了一整天把FLEX SDK和FLEX IN MYECLIPSE给配了起来,总...

一个Flex3多文件上传组件

最近在看《Flex3权威指南》,除了书中个别地方翻译的笔误外,确实是本好书,看的兴起,就写了这个多文件上传组件。网上现成上传组件很多,有些写的很好,我的当然不能和别人那些牛人的相比,仅做学习交流之用,...

flex as3开源组件

flex项目和组件等open-source project : FlexAdobe APIs 主要包含corelib, mappr, flickr, youtube及加密等类库. http://lab...

Flex之旅:第二部分:容器与布局(2)---动态添加组件(TabNavigator)

动态添加组件 其实所谓的动态添加组件,就是使用as代码去添加,而不是使用标签去事先定义好。 我定义了一个TabNavigator,初始化时候,没有往里面添加任何的组件。 之后...
  • miqi770
  • miqi770
  • 2015年03月26日 10:23
  • 3510
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Flex组件篇:HSlider和VSlider
举报原因:
原因补充:

(最多只允许输入30个字)