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

flex 时间滚动组件,强大(可自行选择时,分,秒,是否可用)

    博客分类:
  • flex
阅读更多

package hxht.comps.datefiled
{
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.utils.clearTimeout;
    import flash.utils.setTimeout;
   
    import mx.core.UIComponent;
   
    import spark.components.supportClasses.ItemRenderer;
    import spark.components.supportClasses.SkinnableContainerBase;

 [Style(name="fillColors", type="Array" )]
 
    /**
     *  时间滚动组件
     * @author mmh
     */
    public class TimeStepper extends SkinnableContainerBase
    {
        /**
         *
         */
        public function TimeStepper()
        {
            super();
        }
  
  /**
   * 当前显示标签
   */  
  private var _currentTimeStr:String = "" ;

        [Bindable]
        [SkinPart(required="true")]
        /**
         *
         * @default
         */
        public var upBtn:UIComponent;

        [Bindable]
        [SkinPart(required="true")]
        /**
         *
         * @default
         */
        public var downBtn:UIComponent;

        [Bindable]
        [SkinPart(required="true")]
        /**
         *
         * @default
         */
        public var hourLabel:ItemRenderer;

        [Bindable]
        [SkinPart(required="true")]
        /**
         *
         * @default
         */
        public var minuteLabel:ItemRenderer;

        [Bindable]
        [SkinPart(required="true")]
        /**
         *
         * @default
         */
        public var secondLabel:ItemRenderer;

        //是否显示 小时
        private var _showHour:Boolean = true;

        //是否显示分钟
        private var _showMinute:Boolean = true;

        //是否显示秒
        private var _showSecond:Boolean = true;
  
        /**
         * 当前小时
         * @default
         */
        public var currentHour:Number = 0;

        /**
         * 当前分钟
         * @default
         */
        public var currentMinu:Number = 0;

        /**
         * 当前秒
         * @default
         */
        public var currentSecond:Number = 0;

        /**
         * 当前操作对象
         */
        public var currentSelected:int = 0;

        /**
         *
         * @default
         */
        public var currentItemRender:ItemRenderer;

        /**
         * 操作方向
         */
        protected var dire:int = 1;

        /**
         * 是否开始翻数
         */
        protected var isrun:Boolean = false;

        /**
         * 累加 速度
         */
        public var step:Number = 1;
  
  //catch id
        private var timeId:int = -1;

        override protected function createChildren():void
        {
//            if (!getStyle("skinClass"))
//                this.setStyle("skinClass", TimeStepperSkin);
            super.createChildren();

            if (hourLabel)
                selectedItemRender(hourLabel, 0);
            else if (minuteLabel)
                selectedItemRender(minuteLabel, 0);
            else if (secondLabel)
                selectedItemRender(secondLabel, 0);
            refreshLabel();
        }

        /**
         * 上翻
         * @param e
         *
         */
        protected function upBtnClickHandler(e:Event):void
        {
            dire = 1;

            isrun = true;
            timeFameHandler();
            timeId = setTimeout(startTimeHandler, 800);
        }


        /**
         * 下翻
         * @param e
         *
         */
        protected function downBtnClickHandler(e:Event):void
        {
            dire = -1;
            isrun = true;
            timeFameHandler();
            timeId = setTimeout(startTimeHandler, 800);
        }

  /**
   * 开始连续滚动
   *
   */  
        private function startTimeHandler():void
        {
            clearTimeout(timeId);
            timeId = -1;
            if (isrun)
                this.addEventListener(Event.ENTER_FRAME, timeFameHandler);
        }

        /**
         * 选中 小时
         * @param e
         */
        protected function hourSelectedHandler(e:Event):void
        {
            selectedItemRender(hourLabel, 0);
        }

        /**
         * 选中分钟
         * @param e
         */
        protected function minueSelectedHandler(e:Event):void
        {
            selectedItemRender(minuteLabel, 1);
        }

        /**
         * 选中秒
         * @param e
         */
        protected function secondSelectedHandler(e:Event):void
        {
            selectedItemRender(secondLabel, 2);
        }

        /**
         * 选中某个对象
         * @param item
         * @param type
         */
        protected function selectedItemRender(item:ItemRenderer, type:int):void
        {
            if (currentItemRender)
                currentItemRender.selected = false;
            item.selected = true;
            currentItemRender = item;
            currentSelected = type;
        }

        /**
         *
         * @param e
         */
        protected function outBtnClickHandler(e:Event):void
        {
            isrun = false;
            if (timeId > 0)
                clearTimeout(timeId);
            this.removeEventListener(Event.ENTER_FRAME, timeFameHandler);
        }

        /**
         * 滚动处理
         * @param e
         */
        protected function timeFameHandler(e:Event = null):void
        {
            if (isrun)
            {
                var _num:Number = 0;
                if (currentSelected == 0)
                {
                    _num = currentHour + dire * step;
                    if (_num >= 24)
                        currentHour = 0;
                    else if (_num < 0)
                        currentHour = 23;
                    else
                        currentHour = _num;
                }
                else if (currentSelected == 1)
                {
                    _num = currentMinu + dire * step;
                    if (_num >= 60)
                        currentMinu = 0;
                    else if (_num < 0)
                        currentMinu = 59;
                    else
                        currentMinu = _num;
                }
                else if (currentSelected == 2)
                {
                    _num = currentSecond + dire * step;
                    if (_num >= 60)
                        currentSecond = 0;
                    else if (_num < 0)
                        currentSecond = 59;
                    else
                        currentSecond = _num;
                }
                refreshLabel();
            }
        }

        /**
         * 刷新标签显示
         */
        protected function refreshLabel():void
        {
   updateLabel() ;//刷新标签
   
   var _str:String = "" ;
   if (showHour)
    _str += getZeroLabel(currentHour) ;
   
   if (showMinute)
    _str +=  (_str.length>0?(":"+getZeroLabel(currentMinu)):("00:"+getZeroLabel(currentMinu))) ;
   
   if (showSecond)
    _str +=  (_str.length>0?(":"+getZeroLabel(currentSecond)):("00:"+getZeroLabel(currentSecond))) ;
   
   currentTimeStr = _str ;//刷新 数据
        }
  
  protected function updateLabel( ):void
  {
   if (hourLabel)
    hourLabel.label = getZeroLabel(currentHour);
   
   if (minuteLabel)
    minuteLabel.label = getZeroLabel(currentMinu);
   
   if (secondLabel)
    secondLabel.label = getZeroLabel(currentSecond);
  }

        /**
         * 补零
         * @param num
         * @return
         */
        protected function getZeroLabel(num:int):String
        {
            return num < 10 ? ("0" + num) : num + "";
        }

        /**
         * 显示小时
         */
        public function get showHour():Boolean
        {
            return _showHour;
        }

        /**
         * @private
         */
        public function set showHour(value:Boolean):void
        {
            _showHour = value;
            showUI(hourLabel, _showHour);
        }

        /**
         * 显示分
         */
        public function get showMinute():Boolean
        {
            return _showMinute;
        }

        /**
         * @private
         */
        public function set showMinute(value:Boolean):void
        {
            _showMinute = value;
            showUI(minuteLabel, _showMinute);
        }

        /**
         * 显示秒
         */
        public function get showSecond():Boolean
        {
            return _showSecond;
        }

        /**
         * @private
         */
        public function set showSecond(value:Boolean):void
        {
            _showSecond = value;
            showUI(secondLabel, _showSecond);
        }

        override protected function partAdded(partName:String, instance:Object):void
        {
            super.partAdded(partName, instance);
            if (instance == upBtn)
            {
    upBtn.owner = this ;
    upBtn.buttonMode = true ;
                upBtn.addEventListener(MouseEvent.MOUSE_DOWN, upBtnClickHandler);
                upBtn.addEventListener(MouseEvent.MOUSE_OUT, outBtnClickHandler);
                upBtn.addEventListener(MouseEvent.MOUSE_UP, outBtnClickHandler);
            }
            else if (instance == downBtn)
            {
    downBtn.owner = this ;
    downBtn.buttonMode = true ;
                downBtn.addEventListener(MouseEvent.MOUSE_DOWN, downBtnClickHandler);
                downBtn.addEventListener(MouseEvent.MOUSE_OUT, outBtnClickHandler);
                downBtn.addEventListener(MouseEvent.MOUSE_UP, outBtnClickHandler);
            }
            else if (instance == hourLabel)
            {
                hourLabel.addEventListener(MouseEvent.CLICK, hourSelectedHandler);
    hourLabel.buttonMode = true ;
                showUI(hourLabel, _showHour);
            }
            else if (instance == minuteLabel)
            {
                minuteLabel.addEventListener(MouseEvent.CLICK, minueSelectedHandler);
    minuteLabel.buttonMode = true ;
                showUI(minuteLabel, _showMinute);
            }
            else if (instance == secondLabel)
            {
                secondLabel.addEventListener(MouseEvent.CLICK, secondSelectedHandler);
    secondLabel.buttonMode = true ;
                showUI(secondLabel, _showSecond);
            }
        }

        override protected function partRemoved(partName:String, instance:Object):void
        {
            if (instance == upBtn)
            {
                upBtn.removeEventListener(MouseEvent.MOUSE_DOWN, upBtnClickHandler);
                upBtn.removeEventListener(MouseEvent.MOUSE_OUT, outBtnClickHandler);
                upBtn.removeEventListener(MouseEvent.MOUSE_UP, outBtnClickHandler);
            }
            else if (instance == downBtn)
            {
                upBtn.removeEventListener(MouseEvent.MOUSE_DOWN, downBtnClickHandler);
                downBtn.removeEventListener(MouseEvent.MOUSE_OUT, outBtnClickHandler);
                downBtn.removeEventListener(MouseEvent.MOUSE_UP, outBtnClickHandler);
            }
            super.partRemoved(partName, instance);
        }

        /**
         *  显示隐藏某个组件
         * @param ui
         * @param flag
         *
         */
        protected function showUI(ui:UIComponent, flag:Boolean = true):void
        {
            if (ui)
            {
                ui.visible = flag;
                ui.includeInLayout = flag;
            }
        }
  
  /**
   * 设置 当前时间字符 02:01:20
   * @param value
   *
   */  
  public function set currentTimeStr( value:String ):void
  {
   if(_currentTimeStr!=value)
   {
    _currentTimeStr = value ;
    if(value)
    {
     var _arr:Array = value.split(":") ;
     if(_arr.length>=1)
      currentHour = int(_arr[0]) ;
     if(_arr.length>=2)
      currentMinu = int(_arr[1]) ;
     if(_arr.length>=3)
      currentSecond = int(_arr[2]) ;
    }
    else
    {
     currentHour = 0 ;
     currentMinu = 0 ;
     currentSecond = 0 ;
    }
    refreshLabel();
   }
  }
  
  [Bindable]
  public function get currentTimeStr():String
  {
   return _currentTimeStr;
  }

    }
}

0
1
分享到:
评论

相关推荐

    flex时间控件,可选时分

    ### Flex时间控件详解:可选时分 在Flex开发中,自定义控件是非常常见且重要的一个环节。本文将详细介绍一个使用Flex编写的自定义时间控件——可选时分(简称“flex时间控件”)。该控件不仅允许用户选择具体的日期...

    FLEX4-instance.rar_flex_flex4

    本资料“FLEX4-instance.rar”聚焦于Flex 4中的时间组件操作,这对于开发涉及时间管理和调度的应用程序至关重要。 Flex 4的时间组件主要包括以下几类: 1. **TimeLine**:时间线组件允许开发者创建和控制复杂的...

    flex下拉dataGrid

    在Flex开发中,"flex下拉dataGrid"是一种常见的用户界面组件组合,它结合了下拉菜单(Dropdown)和数据网格(DataGrid)的功能,用于提供丰富的数据选择体验。这样的设计通常用于当用户需要从一个较大的数据集合中...

    flex 标签云源代码

    综上所述,Flex标签云源代码的实现涉及了Flex布局、动态滚动、项目对齐、大小调整以及交互设计等多个方面,通过理解并应用这些技术,我们可以创建出既美观又实用的标签云组件。这个名为"FlexSample02"的压缩包文件很...

    flex.resizable.comp:Flex 可调整大小的组件

    在Flex编程环境中,可调整大小的组件(flex.resizable.comp)是用于创建用户界面时非常重要的元素,尤其在设计响应式或自适应布局时。这些组件允许用户通过拖动边框来改变组件的尺寸,从而提供更加灵活和交互式的...

    Flex面试题及答案

    - **FlexLibraryProject**:用于创建库项目,通常包含可复用的组件、样式和脚本,这些库可以被其他Flex或AS项目引用。 #### 3. RSL的理解与应用 RSL(Runtime Shared Libraries)是一种在运行时动态加载的共享库,...

    flex DataGridPageDemo

    在Flex开发中,DataGrid组件是用于展示大量结构化数据的常用控件。它提供了灵活的布局和可定制的功能,使用户能够有效地浏览和操作表格数据。本示例"flex DataGridPageDemo"专注于在DataGrid中实现分页功能,这对于...

    Flex实现在线显示Word文档,FlexPaper

    FlexPaper 是一个强大的工具,它允许开发者在网页中嵌入并在线查看Microsoft Word文档。这个技术基于Adobe Flex,一个开放源代码的框架,用于构建富互联网应用程序(RIA)。通过使用FlexPaper,用户无需安装任何额外...

    微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)

    微信小程序中的组件顶端固定或底端固定是小程序开发中常用的功能之一,它主要为了在用户滚动页面时,某些内容可以固定在屏幕的顶部或底部,从而提高用户操作的便捷性,增强用户体验。这种效果类似于网页开发中的...

    FlexBuilder3常用快捷键

    ### FlexBuilder3常用快捷键详解 #### 一、概述 FlexBuilder3是Adobe推出的一款用于开发Flex和ActionScript应用程序的专业集成开发环境(IDE)。通过掌握其内置的各种快捷键,可以显著提升开发效率并优化编码体验。...

    flex tree自动显示横向滚动条实现代码

    通过上述代码,我们实现了自适应的Flex Tree组件,当内容宽度超出容器宽度时,会自动显示横向滚动条。这个解决方案对那些需要处理大量数据并希望保持界面整洁的开发者来说非常有用。同时,这种做法也遵循了Flex组件...

    flex相册效果

    Flex相册是一种基于Flex布局的图像展示技术,主要用于创建具有高度可定制性和灵活性的图库或相册组件。在Web开发中,特别是在响应式设计中,Flex相册因其能够适应不同屏幕尺寸和设备类型而备受青睐。以下是关于Flex...

    flex移动设备开发

    - **Flex 4.5 发行版**:该版本特别强调了移动设备上的开发能力,支持触摸滚动等特性,并引入了一系列新的组件,使得开发者能够更加容易地构建符合移动设备标准设计模式的应用程序。 #### 2. 移动应用程序开发概述 ...

    AntDesign组件库目录.docx

    - **不可选择日期和时间**: 支持禁止选择某些日期和时间。 - **预设范围**: 支持预设常用的时间范围,如今天、本周等。 - **三种大小**: 支持调整日期选择框的尺寸。 - **受控面板**: 支持通过编程控制日期选择面板...

    ADOBE FLEX 和 ADOBE FLASH BUILDER 开发手机应用程序

    **Adobe Flex 4.5** 和 **Adobe Flash Builder 4.5** 为开发者提供了强大的工具集,使他们能够在多种移动平台上开发高质量的应用程序。随着移动技术的飞速发展,了解如何使用这些工具来构建适用于不同设备的应用程序...

    TAB-左侧滚动菜单

    "TAB-左侧滚动菜单"是一个采用CSS技术实现的网页导航组件,旨在为用户提供简洁、大气且易于操作的左侧滚动式菜单。在这个项目中,我们将探讨CSS在创建这种导航菜单中的应用,以及如何通过CSS实现动态效果。 首先,...

    左右切换滚动

    7. **框架和库**:许多现有的前端框架和库,如Bootstrap、Swiper.js、Slick.js等,提供了内置的左右切换滚动组件,可以直接使用,简化开发工作。 8. **测试与调试**:在开发过程中,应确保在各种浏览器和设备上进行...

    Carousel 旋转相册

    【Carousel 旋转相册】是一种常见的用户界面组件,主要用于展示一系列图片或内容,通过循环滚动的方式,让用户可以方便地浏览和交互。在Web开发中,它通常被用于网站的首页或者产品展示区域,以吸引用户的注意力并...

    Ext-plugins

    Flex 布局允许组件根据可用空间动态调整大小,特别适用于响应式设计,使得应用程序能在不同屏幕尺寸下保持良好的显示效果。 标签 "Ext-plugins" 强调了我们讨论的核心主题,即 Ext JS 插件。这些插件通常包括对特定...

    Altium Designer Beta 19.0.10完整版安装包+安装教程+和谐文件

    修复了“属性”面板中的错误,该错误导致NEXUS Server托管组件的“无法在可用库中找到组件”错误,该组件也损坏了引用。 27404 修复了从服务器更新组件数据时由于过多的数据请求导致的ActiveBOM延迟问题。 27535 ...

Global site tag (gtag.js) - Google Analytics