`
Virgo_S
  • 浏览: 1150849 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

flex组件 HSlider 和 VSlider 的使用

    博客分类:
  • Flex
阅读更多
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>
分享到:
评论

相关推荐

    flex 4.6Css

    VScrollBar | HSlider | VSlider | DropDownList | TextArea | TextInput | ComboBox | List NumericStepper | Spinner | Panel | BorderContainer | TitleWindow | VideoPlayer | DataGrid mx包含组件: Accordion...

    Flex UI组件使用全集

    ### Flex UI组件使用全集详解 #### 概述 本文档是基于阿树对Adobe Flex UI组件库的全面整理,并结合Adobe主页上提供的各种组件代码示例进行深度解析。Flex是一种用于构建高度交互式的Web应用的框架,尤其适用于创建...

    《Flex 3 组件实例与应用(2009版)》(PDF)

    以上仅为《Flex 3 组件实例与应用(2009版)》书中部分知识点的概述,该书详细介绍了每一个组件的使用方法、属性、事件以及示例代码,对于希望深入学习和掌握Flex 3开发技术的读者来说,是一本不可多得的实战指南。

    Flex 3 组件实例与应用(2009版)

    通过以上对《Flex 3 组件实例与应用》一书中提到的各类组件的介绍,我们可以看出Flex 3提供的组件不仅涵盖了基本的UI需求,还包括了高级的交互、数据展示和验证等功能。这使得开发者能够在构建复杂的应用程序时更加...

    非常不错的Flex播放器

    在Flex中,使用Microphone类可以非常方便地获取和处理音频流,无需将音频数据发送到服务器,这在某些情况下提高了性能和隐私性。 以下是一些关于Flex播放器和Microphone使用的关键知识点: 1. **Flex框架**:Flex...

    flex 音频播放器

    至于界面设计,Flex提供了一系列的UI组件,如`VSlider`用于音量控制,`HSlider`或`Timeline`用于播放位置拖放。这些组件可以通过MXML或ActionScript进行布局和定制,以创建符合用户需求的界面。 在实际项目中,我们...

    flex 3 所有可视控件实例

    Flex 3 的组件库还包括其他许多控件,如 Vscrollbar、Vslider、Accordion、Button、Canvas 等,它们共同构成了构建 Flex 应用程序的强大基础。 总之,Flex 3 的 Component Explorer 是一个极其宝贵的资源,对于学习...

    Flex课程学习(附带源码)

    flex + MyEclipse的配置和使用 http://wenku.baidu.com/view/f9ede23a0912a21614792988.html Flex + java 项目搭建 http://wenku.baidu.com/view/9b4b5f29647d27284b7351c4.html j2ee搭建flex环境 ...

    Flex实现了一个FlV格式的视频播放功能

    在Flash Player或Adobe AIR环境下运行,Flex为开发者提供了强大的UI组件库和编程模型,使得创建交互式、高性能的Web应用变得轻而易举。在本案例中,我们关注的是如何使用Flex实现一个FlV格式的视频播放功能。 FlV...

    Flex视频播放器开发初级代码

    总的来说,Flex视频播放器的初级开发涉及到的主要知识点包括:使用`VideoDisplay`组件播放视频、使用`s:Image`模拟按钮行为、通过`HSlider`实现进度条和音量控制、以及添加全屏功能。通过这些基础元素,我们可以构建...

    Flex4.5 做的简易mp3例子

    总的来说,这个Flex 4.5的MP3播放示例展示了如何使用基本的Flex组件和ActionScript 3.0来实现音频播放、停止、进度控制和音量调节。通过这个实例,初学者可以了解到Flex中处理音频的基本概念和技术,为进一步开发更...

    hslider.js-简洁的响应式全屏宽度jQuery幻灯片插件

    3. **滑动动画**:hslider.js可能会使用jQuery的动画API(如`.animate()`)来创建平滑的过渡效果。 4. **全屏布局**:了解如何利用CSS的`width: 100%`,`height: 100vh`等属性实现全屏显示,以及如何处理内容在不同...

    FLEX操作XML&JSON

    【标题】: 使用FLEX操作XML和JSON 【概述】 在本文中,我们将探讨如何在Adobe Flex(现称为OpenFL)环境中处理XML和JSON数据。Flex是一种开源框架,允许开发人员使用ActionScript 3.0(AS3)和MXML来构建富互联网...

    Flex 特效1-放大镜效果

    本示例通过结合使用 Flex 的 Shader 和 ShaderFilter 技术,成功实现了放大镜效果。这种视觉特效不仅增强了用户体验,还展示了 Flex 在处理复杂图像处理任务方面的能力。通过对这些关键技术的理解和实践,开发者可以...

    flex学习记录非常详细

    例如,以下代码将`HSlider`组件的值`fsize.value`绑定到了`Label`组件的`fontSize`属性: ```xml 周末加班的人很累的" fontSize="{fsize.value}"/&gt; &lt;mx:HSlider id="fsize" minimum="10" maximum="50" /&gt; ``` 当你...

    flex播放mp3

    flex播放mp3源码: 进度:" width="45"/&gt; &lt;s:HSlider id="hslider1" x="135" y="48" width="221" changeEnd="hslider1_changeEndHandler(event)" maximum="100" showDataTip="false"/&gt; 音量:" width="45"/&gt; ...

    Flex视频播放器(支持rtmp协议)开发代码

    在本文中,我们将深入探讨如何使用Flex构建一个支持RTMP协议的视频播放器,以及如何与Red5服务器进行交互。...通过理解这些核心概念和组件,开发者可以创建出功能丰富的视频播放应用,满足不同场景的需求。

    jquery.HSlider, 全页面滚动,触摸友好的jQuery slider.zip

    jquery.HSlider, 全页面滚动,触摸友好的jQuery slider jQuery.HSlider全页面滚动,触摸友好的jQuery slider创建一个完整页面滚动网页 slider 从未如此容易所有动画都是由CSS3和GPU加速页面索引现在由URL哈希支持URL...

    Flex 特效2-缩放模糊效果

    在这个例子中,我们使用了预编译的着色器文件`zoomBlur.pbj`。 2. **初始化Shader对象**:在`onApplicationComplete`函数中,我们创建了一个`Shader`实例,并将其绑定到相应的图像控件上。 3. **设置参数**:通过...

Global site tag (gtag.js) - Google Analytics