小小菜鸟的web菜园子

web开发学习。好记性不如烂笔头。每天进步一点点!

导航

设置NumericStepper组件每次点击调节的步长.

stepSize 属性的学习.
示例:

代码:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout
="vertical"
        verticalAlign
="middle"
        backgroundColor
="white">

    
<mx:ApplicationControlBar dock="true">
        
<mx:Form styleName="plain">
            
<mx:FormItem label="stepSize:">
                
<mx:HSlider id="slider"
                        minimum
="1"
                        maximum
="10"
                        value
="1"
                        snapInterval
="1"
                        tickInterval
="1"
                        liveDragging
="true" />
            
</mx:FormItem>
        
</mx:Form>
    
</mx:ApplicationControlBar>

    
<mx:NumericStepper id="numericStepper"
            minimum
="0"
            maximum
="100"
            stepSize
="{slider.value}" />

</mx:Application>

也可以通过自定义组件来完成:
comps/MyComp.as文件
/**
 * http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/
 */
package comps {
    import mx.containers.ApplicationControlBar;
    import mx.containers.Canvas;
    import mx.containers.Form;
    import mx.containers.FormItem;
    import mx.controls.HSlider;
    import mx.controls.NumericStepper;
    import mx.core.Application;
    import mx.events.SliderEvent;

    public class MyComp extends Canvas {
        public var appControlBar:ApplicationControlBar;
        public var form:Form;
        public var formItem:FormItem;
        public var slider:HSlider;
        public var numericStepper:NumericStepper;

        public function MyComp() {
            super();
            init();
        }

        public function init():void {
            slider = new HSlider();
            slider.minimum = 1;
            slider.maximum = 10;
            slider.value = 1;
            slider.snapInterval = 1;
            slider.tickInterval = 1;
            slider.liveDragging = true;
            slider.addEventListener(SliderEvent.CHANGE, slider_change);

            formItem = new FormItem();
            formItem.label = "stepSize:";
            formItem.addChild(slider);

            form = new Form();
            form.styleName = "plain";
            form.addChild(formItem);

            appControlBar = new ApplicationControlBar();
            appControlBar.dock = true;
            appControlBar.addChild(form);

            Application.application.addChildAt(appControlBar, 0);

            numericStepper = new NumericStepper();
            numericStepper.minimum = 0;
            numericStepper.maximum = 100;
            addChild(numericStepper);
        }

        private function slider_change(evt:SliderEvent):void {
            numericStepper.stepSize = evt.value;
        }
    }

mxml文件:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps
="comps.*"
        layout
="vertical"
        verticalAlign
="middle"
        backgroundColor
="white">

    
<comps:MyComp id="myComp" />

</mx:Application>

来自:http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/

posted on 2008-05-18 16:36  『小小菜鸟』  阅读(539)  评论(0编辑  收藏  举报