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事件
<mx:Script>
<![CDATA[
function sliderChange(event:Object)
{
thumb.text=event.target.value;
}
]]>
</mx:Script>
<mx:Panel>
<mx:HSlider change='sliderChange(event)' />
<mx:TextArea id='thumb' />
</mx:Panel>
默认,只有当释放滑杆的时候,change事件才会响应,所以上面的例子TextArea框中的值只有释放滑杆的时候才会变化。如果设置 liveDragging属性为True的话,就可以做到拖动滑杆的时候就可以响应change事件了。
<mx:Script>
<![CDATA[
function sliderChangeLive(event:Object)
{
thumbLive.text=event.target.value;
}
]]>
</mx:Script>
<mx:Panel>
<mx:HSlider liveDragging='true' change='sliderChangeLive(event)' />
<mx:TextArea id='thumbLive' />
</mx:Panel>
使用2个滑杆
下面的例子很好的演示了如何两个滑杆,请注意thumbIndex属性的用法
<mx:Application xmlns:mx='http://www.macromedia.com/2003/mxml' >
<mx:Script>
<![CDATA[
function sliderChangeTwo(event:Object)
{
thumbTwoA.text=event.target.values[0];
thumbTwoB.text=event.target.values[1];
thumbIndex.text=event.thumbIndex;
}
]]>
</mx:Script>
<mx:Panel>
<mx:HSlider thumbCount='2' change='sliderChangeTwo(event)' />
<mx:TextInput id='thumbTwoA' />
<mx:TextInput id='thumbTwoB' />
<mx:TextInput id='thumbIndex' />
</mx:Panel>
</mx:Application>
定制ToolTip
默认的提示框会显示当前的值,我们可以自定义自己的提示信息,看下面的例子。
<mx:Script>
<![CDATA[
function myToolTipFunc(val:String):String
{
return 'Current value: ' + val;
}
]]>
</mx:Script>
<mx:Panel>
<mx:HSlider toolTipFormatFunction='myToolTipFunc' />
</mx:Panel>
分享到:
相关推荐
VScrollBar | HSlider | VSlider | DropDownList | TextArea | TextInput | ComboBox | List NumericStepper | Spinner | Panel | BorderContainer | TitleWindow | VideoPlayer | DataGrid mx包含组件: Accordion...
### Flex UI组件使用全集详解 #### 概述 本文档是基于阿树对Adobe Flex UI组件库的全面整理,并结合Adobe主页上提供的各种组件代码示例进行深度解析。Flex是一种用于构建高度交互式的Web应用的框架,尤其适用于创建...
以上仅为《Flex 3 组件实例与应用(2009版)》书中部分知识点的概述,该书详细介绍了每一个组件的使用方法、属性、事件以及示例代码,对于希望深入学习和掌握Flex 3开发技术的读者来说,是一本不可多得的实战指南。
通过以上对《Flex 3 组件实例与应用》一书中提到的各类组件的介绍,我们可以看出Flex 3提供的组件不仅涵盖了基本的UI需求,还包括了高级的交互、数据展示和验证等功能。这使得开发者能够在构建复杂的应用程序时更加...
在Flex中,使用Microphone类可以非常方便地获取和处理音频流,无需将音频数据发送到服务器,这在某些情况下提高了性能和隐私性。 以下是一些关于Flex播放器和Microphone使用的关键知识点: 1. **Flex框架**:Flex...
至于界面设计,Flex提供了一系列的UI组件,如`VSlider`用于音量控制,`HSlider`或`Timeline`用于播放位置拖放。这些组件可以通过MXML或ActionScript进行布局和定制,以创建符合用户需求的界面。 在实际项目中,我们...
Flex 3 的组件库还包括其他许多控件,如 Vscrollbar、Vslider、Accordion、Button、Canvas 等,它们共同构成了构建 Flex 应用程序的强大基础。 总之,Flex 3 的 Component Explorer 是一个极其宝贵的资源,对于学习...
flex + MyEclipse的配置和使用 http://wenku.baidu.com/view/f9ede23a0912a21614792988.html Flex + java 项目搭建 http://wenku.baidu.com/view/9b4b5f29647d27284b7351c4.html j2ee搭建flex环境 ...
在Flash Player或Adobe AIR环境下运行,Flex为开发者提供了强大的UI组件库和编程模型,使得创建交互式、高性能的Web应用变得轻而易举。在本案例中,我们关注的是如何使用Flex实现一个FlV格式的视频播放功能。 FlV...
总的来说,Flex视频播放器的初级开发涉及到的主要知识点包括:使用`VideoDisplay`组件播放视频、使用`s:Image`模拟按钮行为、通过`HSlider`实现进度条和音量控制、以及添加全屏功能。通过这些基础元素,我们可以构建...
总的来说,这个Flex 4.5的MP3播放示例展示了如何使用基本的Flex组件和ActionScript 3.0来实现音频播放、停止、进度控制和音量调节。通过这个实例,初学者可以了解到Flex中处理音频的基本概念和技术,为进一步开发更...
3. **滑动动画**:hslider.js可能会使用jQuery的动画API(如`.animate()`)来创建平滑的过渡效果。 4. **全屏布局**:了解如何利用CSS的`width: 100%`,`height: 100vh`等属性实现全屏显示,以及如何处理内容在不同...
【标题】: 使用FLEX操作XML和JSON 【概述】 在本文中,我们将探讨如何在Adobe Flex(现称为OpenFL)环境中处理XML和JSON数据。Flex是一种开源框架,允许开发人员使用ActionScript 3.0(AS3)和MXML来构建富互联网...
本示例通过结合使用 Flex 的 Shader 和 ShaderFilter 技术,成功实现了放大镜效果。这种视觉特效不仅增强了用户体验,还展示了 Flex 在处理复杂图像处理任务方面的能力。通过对这些关键技术的理解和实践,开发者可以...
例如,以下代码将`HSlider`组件的值`fsize.value`绑定到了`Label`组件的`fontSize`属性: ```xml 周末加班的人很累的" fontSize="{fsize.value}"/> <mx:HSlider id="fsize" minimum="10" maximum="50" /> ``` 当你...
flex播放mp3源码: 进度:" width="45"/> <s:HSlider id="hslider1" x="135" y="48" width="221" changeEnd="hslider1_changeEndHandler(event)" maximum="100" showDataTip="false"/> 音量:" width="45"/> ...
在本文中,我们将深入探讨如何使用Flex构建一个支持RTMP协议的视频播放器,以及如何与Red5服务器进行交互。...通过理解这些核心概念和组件,开发者可以创建出功能丰富的视频播放应用,满足不同场景的需求。
jquery.HSlider, 全页面滚动,触摸友好的jQuery slider jQuery.HSlider全页面滚动,触摸友好的jQuery slider创建一个完整页面滚动网页 slider 从未如此容易所有动画都是由CSS3和GPU加速页面索引现在由URL哈希支持URL...
在这个例子中,我们使用了预编译的着色器文件`zoomBlur.pbj`。 2. **初始化Shader对象**:在`onApplicationComplete`函数中,我们创建了一个`Shader`实例,并将其绑定到相应的图像控件上。 3. **设置参数**:通过...