扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
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 : 可以同时使用两个箭头标记: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>
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=755175
如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。
现场直击|2021世界人工智能大会
直击5G创新地带,就在2021MWC上海
5G已至 转型当时——服务提供商如何把握转型的绝佳时机
寻找自己的Flag
华为开发者大会2020(Cloud)- 科技行者