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

HSlider的标签随滑动动态显示

XML 
阅读更多
HSlider的labels属性设置后,会自动显示label在相应的刻度范围。比如labels=[2000,2020],则在滑动条的左右两端分别显示2000,2020.现在需要在滑动的时候,让slider的值动态的显示出来,研究了半天自带的属性,无法实现,所以使用label和slider结合的方式来做。如下代码直接运行即可看到效果。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
        <![CDATA[
        import mx.controls.Text;
        import mx.events.SliderEvent;
            private var thumbIdx:int; 
            private var labelv:String;
           private function setThumbIdx(evt:SliderEvent):void {
                switch (evt.type) {
                    case SliderEvent.THUMB_RELEASE:
                       thumbIdx = evt.thumbIndex;
                        var scale:int=dataSlider.width/(dataSlider.maximum-dataSlider.minimum);
                        if(thumbIdx==0)
                        {
                        htipminvalue.text=labelv;
                            htipminvalue.x=dataSlider.x+((Number(labelv))%dataSlider.minimum)*scale;
                        }
                         if(thumbIdx==1)
                        {
                        htipmaxvalue.text=labelv;
                            htipmaxvalue.x=dataSlider.x+((Number(labelv))%dataSlider.minimum)*scale;
                        }
                        break;

                }
           }
           private function formatFunction(item:Object):String {
                labelv=item.toString();
                 return item.toString();
           }
        ]]>
    </mx:Script>

    <mx:Canvas  label="ComboBox Control Example" 
        height="75%" width="75%"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
        color="0xffffff" >
        <mx:Label id="htipminvalue" y="40" text="2000" x="50"/>
        <mx:Label id="htipmaxvalue" y="40"  text="2020" x="250"/>
        <mx:HSlider id="dataSlider" y="50"    width="200"  x="50" allowTrackClick="false"
minimum="2000" maximum="2020" values="[2000,2020]" showDataTip="true" snapInterval="5" 
dataTipFormatFunction="formatFunction" liveDragging="true"       
  thumbRelease="setThumbIdx(event);"
thumbCount="2" allowThumbOverlap="false" tickInterval="5" showTrackHighlight="true"
/>
   </mx:Canvas>
</mx:Application>
0
0
分享到:
评论

相关推荐

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

    1. **响应式全屏**:这个标签进一步强调了hslider.js的核心功能,即它能够实现内容全屏显示,并且在不同设备上都能保持良好的响应式布局。 **文件内容推测:** 由于我们只有一个文件名“hslider.js-简洁的响应式...

    matlab的gui的slider滑动条和可编辑文本框动态调整某个参数.zip

    在本教程中,我们将重点讨论如何使用GUI中的slider滑动条和edit文本框来动态调整某个参数。这个功能常见于各种科学计算和数据分析应用中,通过可视化的方式改变参数值,可以直观地观察结果变化。 首先,创建MATLAB ...

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

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

    hsliderjs是一款简单实用的响应式全屏宽度jQuery幻灯片插件

    2. **触摸支持**:考虑到移动设备的广泛使用,hslider.js支持触摸滑动操作,使得在触屏设备上的交互更加流畅。 3. **动画效果**:除了基础的淡入淡出效果,hslider.js还允许开发者添加更多的过渡动画,如滑动、缩放...

    jQuery hslider.js简洁的响应式全屏宽度幻灯片特效源码.zip

    这通常通过`&lt;script&gt;`标签来完成,确保jQuery库在hslider.js之前加载,因为hslider.js依赖于jQuery。 ```html &lt;script src="path/to/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="path/to/hslider.js"&gt; ``` 2. **HTML...

    slider.zip_GUI滑动条_matlab slider_matlab slider形状_matlab控件_slider

    hSlider = uicontrol('Style', 'slider', 'Min', minVal, 'Max', maxVal, 'Value', initVal, 'Position', pos, 'Callback', callbackFunction); ``` - `'Style'`:设置为'slider'表示创建滑动条。 - `'Min'`和`'Max...

    matlab滑动条代码-DM_fianl:数据挖掘最终项目

    在这个名为"DM_fianl: 数据挖掘最终项目"的资源中,我们可以推测这是一个利用MATLAB进行数据挖掘的实践项目,其中可能包含了通过滑动条来动态控制数据处理或模型参数的功能。 在MATLAB中实现滑动条通常涉及以下步骤...

    matlab滑动条代码-Airport-Vision-based-Control-Simulation:创建了机场地面交通的仿真,从而实现了基

    总结来说,“matlab滑动条代码-Airport-Vision-based-Control-Simulation”项目展示了MATLAB滑动条控件在交互式模拟中的应用,它使得用户能够动态调整关键参数,以研究机场地面交通控制策略。开源性质鼓励了社区参与...

    Flex4.5 做的简易mp3例子

    `hslider1_changeEndHandler`函数会在滑动条释放时被调用,用于改变音频的播放位置。它通过计算滑动条的当前值相对于最大值的比例,然后使用这个比例来设置`Sound`对象的新起始位置。`channel.stop();`确保音频从新...

    非常不错的Flex播放器

    2. **Video和Sound类**:在Flex中,Video类用于显示视频流,而Sound类用于处理音频数据。结合Microphone类,开发者可以实现完整的音频和视频播放功能。 3. **Microphone类**:这个类是ActionScript 3.0的一部分,...

    Codes_matlabcode_

    【标签】"matlabcode" 标签明确了这个话题的核心是关于MATLAB的编程。MATLAB的语法简洁明了,它的代码通常包含数据处理、矩阵运算以及图形绘制等功能。 现在,让我们深入解析两个压缩包中的文件: 1. **GUItest....

    flex播放mp3

    &lt;s:HSlider id="hslider1" x="135" y="48" width="221" changeEnd="hslider1_changeEndHandler(event)" maximum="100" showDataTip="false"/&gt; 音量:" width="45"/&gt; &lt;s:HSlider id="hslider2" x="136" y="71" ...

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

    HSlider是水平滑动条,用于控制数值范围的选择,常见于音量控制、亮度调节等场景。 #### List List组件用于展示垂直列表,可以包含多选、单选等不同模式。 #### NumericStepper NumericStepper是一个数字输入控件...

    Flex初级数据绑定代码

    数据绑定使得UI元素能够自动更新其显示的内容,而无需编写额外的事件监听器或其他代码。 #### 三、代码详解 ##### 1. 文件结构 该MXML文件定义了一个简单的Flex应用程序,主要包括以下几部分: - **文档类型声明...

    flex学习记录非常详细

    当你移动滑块时,标签的字体大小会随之改变,无需编写额外的事件处理代码。 2. 数据绑定二:函数返回值绑定 除了直接绑定数据源属性外,还可以将函数的返回值作为数据源。使用`[Bindable]`注解标记函数,使其返回值...

    6_GUIDE MATLAB – 如何在 GUI 中使用滑块:6_GUIDE MATLAB – 如何在 GUI 中使用滑块-matlab开发

    例如,可以使用`set(handles.myTextBox, 'String', num2str(sliderValue))`来更新一个文本框的显示值。 7. **滑块外观定制**: 你可以通过修改滑块的外观属性,如颜色、字体、边框等,使GUI更加个性化。例如,`set...

    flash builder4 ——简单播放器

    添加滑动条控件`mx:HSlider`来调整音量,并设置其改变事件: ```xml &lt;mx:HSlider id="volumeSlider" minimum="0" maximum="1" liveDragging="true" change="setVolume(event)" /&gt; ``` 在ActionScript中,设置音量...

    flex 3 所有可视控件实例

    8. Hslider:Hslider 控件允许用户通过水平滑块来选择一个范围内的值。 9. List:List 控件展示一个垂直列表,用户可以选择其中的项,常用于导航或选项选择。 10. Numericstepper:Numericstepper 是一个数字输入...

Global site tag (gtag.js) - Google Analytics