闪光范围滑块组件

Question

是否有类似闪存中的jQuery元件this或有没有任何准备好的例子如何做到这一点？

谢谢。

Answer 1

我不知道任何内置（或第三方，就此而言）组件。但是，我确信一些第三方必须存在，但它们不可能是免费的。

你可以创建自己的没有太多的麻烦。我已经创建了，如果你想，你可以建立一个基本的工作版本：

// Main class, shows how to use other classes: 

import flash.display.*; 
import flash.events.*; 
import flash.text.TextField; 


public class Main extends Sprite 
{ 
    private var output:TextField; 
    private var range:RangeSlider; 

    public function Main() 
    { 
     output = new TextField(); 
     addChild(output); 

     // SliderImage and ThumbImage are PNGs exported (inheriting from BitmapData) from the fla 
     var thumb:SliderThumb = new SliderThumb(new ThumbImage(20, 20), stage); 
     range = new RangeSlider(new SliderImage(1, 1), thumb, 100); 

     range.x = 55; 
     range.y = 55; 

     range.addEventListener(Event.CHANGE, updateOutput); 

     addChild(range); 

     updateOutput(); 
    } 

    private function updateOutput(e:Event = null):void 
    { 
     output.text = range.min + ' to ' + range.max; 
    } 
} 

SliderThumb类：

import flash.display.*; 
import flash.events.*; 
import flash.geom.Point; 

public class SliderThumb extends Sprite 
{ 
    private var image:Bitmap; 
    private var mouseIsDown:Boolean; 
    private var _stage:Stage; 

    public var min:Number; 
    public var max:Number; 


    public function SliderThumb(imageData:BitmapData, _stage:Stage) 
    { 
     min = max = 0; 

     this._stage = _stage; 

     image = new Bitmap(imageData); 
     addChild(image); 

     addEventListener(Event.ADDED_TO_STAGE, init); 
    } 

    private function init(e:Event):void 
    { 
     removeEventListener(Event.ADDED_TO_STAGE, init); 

     mouseIsDown = false; 

     // Center image: 
     image.x = -Math.round(image.width/2); 
     image.y = -Math.round(image.height/2); 

     addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); 
     _stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp); 
     _stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove); 
    } 

    public function clone():SliderThumb 
    { 
     var clone:SliderThumb = new SliderThumb(image.bitmapData, _stage); 

     clone.min = min; 
     clone.max = max; 

     return clone; 
    } 

    private function mouseDown(e:MouseEvent):void 
    { 
     mouseIsDown = true; 
    } 

    private function mouseUp(e:MouseEvent):void 
    { 
     mouseIsDown = false; 
    } 

    private function mouseMove(e:MouseEvent):void 
    { 
     if (mouseIsDown) { 
      x = parent.globalToLocal(new Point(_stage.mouseX, 0)).x; 

      if (x < min) { 
       x = min; 
      } 
      else if (x > max) { 
       x = max; 
      } 

      dispatchEvent(new Event(Event.CHANGE)); 
     } 
    } 
} 

RangeSlider类：

import flash.display.*; 
import flash.events.*; 
import flash.geom.Point; 

public class RangeSlider extends Sprite 
{ 
    private var background:BitmapData; 
    private var sliders:Array; 

    // Background is a one-pixel wide image that will be tiled horizonatally to give the slider its look 
    public function RangeSlider(background:BitmapData, slider:SliderThumb, size:Number) 
    { 
     this.background = background; 

     slider.min = 0; 
     slider.max = size; 
     sliders = [slider, slider.clone()]; 
     for each (slider in sliders) { 
      addChild(slider); 
      slider.addEventListener(Event.CHANGE, function (e:Event) { dispatchEvent(e); });  // Pass on the CHANGE event 
     } 
     sliders[1].x = size; 

     this.size = size; 
    } 

    public function set size(value:Number):void 
    { 
     // Update background: 
     graphics.clear(); 
     graphics.beginBitmapFill(background);   // Tiles by default 
     graphics.drawRect(0, 0, value, background.height); 
     graphics.endFill(); 
    } 

    // Returns the position of the first slider (from 0 to size): 
    public function get min():Number 
    { 
     return sliders[0].x; 
    } 

    // Returns the position of the second slider (from 0 to size): 
    public function get max():Number 
    { 
     return sliders[1].x; 
    } 
} 

Answer 2

如果你打开进口Flex库中有一些已经构建的解决方案：

1. Flex 3 MX库有一个slider component that supports two thumbs.
2. Patrick Mowrer创建了一个Flex 4 Spark滑块组件，该组件还实现了多个拇指的选项。不过，我认为在目前他仍然有一个trackHighlight功能（如jQuery UI示例中所示）在他的待办事项列表中。虽然在Flex 4皮肤框架中，它不应该那么难实现。它在GitHub上免费提供：https://github.com/pmowrer/spark-components

正如我所说的这两个解决方案都需要使用Flex库，这意味着额外的开销。不过，它们是有效的“Flash”解决方案。