引用
这回我们来谈一谈Slider组件。
在Flex 2中也有Slider组件,不过它被分成了两个组件:HSlider和VSlider。该组件与NumericStepper相似,它允许用户在滑轨两端之间拖动滑块而选择一个数值。该组件的当前值取决于滑轨两端之间滑块的相对位置,这两个端点分别对应Slider组件的最小值和最大值。
一、属性
direction:设置Slider组件的方向,有SliderDirection.HORIZONTAL和SliderDirection.VERTICAL两个值;
liveDragging:设置或获取当滑块移动时,是否持续广播SliderEvent.CHANGE事件。默认值为false;
maximum:设置或获取Slider 组件实例允许的最大值,默认值为10;
minimum:设置或获取Slider 组件实例允许的最小值,默认值为0;
snapInterval:设置或获取滑块移动时的步进值,默认值为0;
tickInterval:设定滑条的标尺刻度的步进值,默认值为0;
vallue:设置或获取Slider 组件的当前值,默认值为0。
二、方法
方法很简单,除了构造方法都是些继承的方法,请参考UIComponent 。
三、事件
change:滑块的位置改变时广播。
thumbDrag:按住滑块后拖动鼠标时广播。
thumbPress:按下滑块时广播。
thumbRelease:按下滑块再松开时广播。
在下面这个简单实例中,我们用一个自定义类在舞台动态添加了一个动态文本和一个滑条。当按住滑块后拖动鼠标,将动态改变动态文本的字号。代码加下:
package com.riafan.tutorials{
import flash.display.Sprite;
import fl.controls.Slider;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.events.*;
public class SliderDemo extends Sprite {
private var tf:TextField;
private var format:TextFormat;
private var slider:Slider=new Slider();
public function SliderDemo() {
configureTextField();
configureSlider();
slider.addEventListener(Event.CHANGE, onChange);
}
private function configureTextField():void {
tf = new TextField();
tf.text = "F";
tf.autoSize = TextFieldAutoSize.CENTER;
tf.background = true;
tf.border = true;
tf.x=100;
tf.y=50;
addChild(tf);
}
private function configureSlider():void {
//设定最小值
slider.minimum=8;
//设定最大值
slider.maximum=64;
//设定滑块移动时的步进值为2
slider.snapInterval=2;
//设定滑条的标尺刻度的步进值为8
slider.tickInterval=8;
//当滑块移动时,持续广播SliderEvent.CHANGE事件
slider.liveDragging=true;
slider.move(50,150);
slider.width=100;
addChild(slider);
}
//自定义侦听器方法
private function onChange(e:Event):void {
var s:Slider = e.target as Slider;
format=new TextFormat();
//设置动态文本的样式字号为Slider组件的当前值
format.size=s.value;
tf.setTextFormat(format);
}
}
}
分享到:
相关推荐
在本文中,我们将深入探讨WPF(Windows Presentation Foundation)中的范围控件,主要涉及Slider和ProgressBar两种组件。这些控件在用户界面设计中扮演着重要角色,为用户提供直观的反馈和交互方式。我们将通过C#...
`来初始化滑块组件。 **4. 配置选项与自定义** jQuery Slider通常提供一系列可配置的选项,允许开发者根据需求定制轮播图的行为。这些选项可能包括但不限于: - `autoplay`: 是否自动播放 - `interval`: 自动播放...
在微信小程序开发中,`slider`组件是一种常用的交互元素,尤其适用于实现双向滑动功能。在标题和描述中提到的“小程序双向滑动组件”即指的是这个组件,它允许用户通过左右滑动来选择不同选项或者浏览内容。下面将...
在给定的标题"vueslider一个轻量的vue滑动组件"中,我们讨论的是一个基于Vue.js的滑动组件——vue-slider。这个组件设计的目标是提供一个轻量级且功能丰富的解决方案,用于在网页中实现滑动效果,无论是用于图片轮播...
在Vue生态中,slider组件是常见的交互元素,常用于展示图片轮播、滑动选择器等场景。本篇文章将深入探讨Vue.js中的slider组件及其开发。 首先,Vue组件是Vue.js的核心特性之一,它允许我们将UI分解为可重用的模块,...
Nivo Slider是一款非常流行的JavaScript幻灯片插件,它以其美观、可定制性强以及易于集成的特点,被广泛应用于网站设计中。本篇文章将详细介绍如何使用Nivo Slider,并提供Nivo Slider 3.2版本的示例代码,帮助你...
Flash 中使用 Slider 组件控制圆大小及计算周长 Flash 中的 Slider 组件 在 Adobe Flash CS6 中,Slider 组件是用来实现动态控制的重要组件之一。通过使用 Slider 组件,我们可以实现圆的大小和周长的实时计算和...
本教程聚焦于UI组件中的Slider组件,这是一个常用于表示数值范围或进度条的控件。在Cocos Creator实战教程的第十部分,我们将深入探讨Slider组件的使用方法和技巧,帮助开发者更好地理解和应用这一组件。 首先,...
在本文中,我们将深入探讨一个名为“slider组件”的前端开发元素,它在Web应用程序和网站设计中被广泛用于创建滑动、轮播或切换效果。本文档的重点是该组件的重构过程,旨在优化代码结构,提高性能,并为开发者提供...
在本场景中,我们讨论的是一个特殊的滑动条——"slider多滑块拖动条",它允许用户通过两个独立的滑动块来定义一个数值区间。这种组件在很多应用场景中都非常有用,例如在音量控制、颜色选择器或数据过滤等场景。 1....
具有单选,多选和标记选项的Vue 3多选组件。 具有标签,自定义插槽和样式选项的Vue 3切换组件。 滑块功能 Vue 2和3支持 100%覆盖 ESM支持 完全可配置 单滑块 多个滑块 工具提示 格式设定 演示版 查看我们的演示。 ...
微信小程序第二章 基础组件slider组件
在Vue生态中,slider组件是一个常见的交互元素,常用于展示图片轮播、滑动选择条等场景。本篇文章将深入探讨Vue slider组件的使用,特别针对初学者。 首先,我们来了解如何安装Vue slider组件。在终端或命令行界面...
"double-sided-slider-master.zip" 提供了一个可双向滑块选择器的组件,适用于那些需要用户同时选择两个范围或者数值的情况,比如日期区间、价格范围等。下面将详细解释这个组件的核心知识点: 1. **组件结构**: ...
微信小程序图片轮播组件Gallery Slider使用方法详解 微信小程序图片轮播组件Gallery Slider是一种常用的交互式组件,它可以帮助开发者快速创建一个图片轮播效果。这篇文章将详细介绍微信小程序图片轮播组件Gallery ...
【JavaScript源代码】可拖拽组件slider.js使用方法详解 在本文中,我们将深入探讨一个基于mirthil.js、JavaScript和SCSS编写的可拖动滑块组件的实现。这个组件适用于那些在项目中需要自定义滑块,而又无法使用UI...
**Revolution Slider 5.4汉化版**是一款广受欢迎的WordPress插件,专为创建引人入胜的响应式滑块而设计。这款插件以其丰富的功能、易用性和高度自定义性著称,是许多网站设计师和开发者的首选工具。在5.4版本中,它...
"slider-revolution-v6.2.23_WordPress_slider_wApuu.com_" 这个标题揭示了我们正在讨论的是一个特定版本的WordPress插件——Slider Revolution,版本号为6.2.23。"slider"表明这是一款滑动展示内容的工具,...
在Vue组件开发中,Slider组件是一种常见的功能,用于实现滑动轮播效果,通常用于展示图片、内容或信息。本篇文章将详细讲解如何在Vue中开发一个基本的Slider组件。 首先,Slider组件的核心是通过CSS的`transform`...
**滑动焦点图组件——slider高仿淘宝实现详解** 在Web开发中,焦点图组件是一种常见的功能,用于在有限的空间内展示多张图片或信息,提高用户体验和网站吸引力。"slider"是一个专为此目的设计的JavaScript插件,它...