flex_tree扩展_时间轴

最新推荐文章于 2021-11-22 11:00:13 发布
最新推荐文章于 2021-11-22 11:00:13 发布
阅读量365 收藏 2
点赞数
分类专栏： 其他 文章标签： flex 时间轴 tree
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26818839/article/details/74979072
版权

最初是要做一个时间轴的效果，在网上找到了一个js的，效果很不错，原界面是如下
这里写图片描述
这里写图片描述
仿照这个效果写出了下面的效果
这里写图片描述
由于展开的效果很像树形展开效果，在tree基础上修改也简单，所以修改了tree，自定义了呈示器，由于有引用字体，所以编译的文件很大，
可自行去掉字体的引用。 下面是tree用到的呈示器

<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" 
          implements="mx.controls.listClasses.IDropInListItemRenderer" 
          creationComplete="onCreationComplete()" 
          dataChange="updateDisplay()">
    <fx:Style source="style/style.css" />
    <s:states>
        <s:State name="top" />
        <s:State name="month" />
        <s:State name="year" />
        <s:State name="contact"  />
    </s:states>

    <s:HGroup  width="100%" height="100%" paddingLeft="20" includeIn="top" >
        <s:HGroup  width="90"  height="60" verticalAlign="middle" >
            <mx:LinkButton id="topName"  fontSize="24"  
                           color="0xffbc00" fontFamily="Lantingh"
                           click="disclosureMouseDownHandler(event)"/>                  
            <mx:Image id="disclosureTopIcon" source="{disclosureOpenIcon}" />
        </s:HGroup> 
        <s:VGroup width="80" height="100%" horizontalAlign="center" >
            <mx:Image source="{topIcon}" />
            <s:Line height="100%" x="0" y="-1"  >
                <s:stroke>
                    <s:SolidColorStroke color="0xffbc00" weight="3"/>
                </s:stroke>
            </s:Line>
        </s:VGroup>
        <s:HGroup  width="100%" height="100%" verticalAlign="middle">
            <s:Label text=" ### 日 志" color="0xffbc00" fontSize="24"/>
        </s:HGroup >
    </s:HGroup >

    <s:HGroup  width="100%" height="100%" paddingLeft="20" includeIn="year" >
        <s:HGroup  width="90"  height="60" verticalAlign="middle" >
            <mx:LinkButton id="yearName"  fontSize="24"  
                           color="0xffbc00" fontFamily="Lantingh"
                           click="disclosureMouseDownHandler(event)"/>                  
            <mx:Image id="disclosureIcon" source="{disclosureOpenIcon}" />
        </s:HGroup> 
        <s:VGroup width="80" height="100%" horizontalAlign="center" >
            <!--<mx:Image source="{defaultLeafIcon}" />-->
            <s:Line height="100%" x="0" y="-1"  >
                <s:stroke>
                    <s:SolidColorStroke color="0xffbc00" weight="3"/>
                </s:stroke>
            </s:Line>
        </s:VGroup>
        <s:HGroup  width="100%" height="100%" verticalAlign="middle">
        </s:HGroup >
    </s:HGroup >

    <s:HGroup  width="100%" height="100%" paddingLeft="20" includeIn="month" >
        <s:HGroup  width="90"  height="30" verticalAlign="middle" >
            <mx:LinkButton id="monthName"  fontSize="20"  
                           color="0x58a6fb" fontFamily="Lantingh"
                           click="disclosureMouseDownHandler(event)"/>                  
            <mx:Image id="disclosureMonthIcon" source="{disclosureOpenMonthIcon}" />
        </s:HGroup> 
        <s:VGroup width="80" height="100%" horizontalAlign="center" >       
            <s:Line height="100%" x="0" y="-1"  >
                <s:stroke>
                    <s:SolidColorStroke color="0xffbc00" weight="3"/>
                </s:stroke>
            </s:Line>
        </s:VGroup>
        <s:HGroup  width="100%" height="100%" verticalAlign="middle">
        </s:HGroup >
    </s:HGroup >


    <s:HGroup id="contactHg" width="100%" height="100%" paddingLeft="20" includeIn="contact">
        <s:HGroup width="90" height="30" verticalAlign="middle" horizontalAlign="right" >
            <s:Label id="dateLab" fontSize="18"/>
        </s:HGroup>                 
        <s:VGroup width="80" height="100%" horizontalAlign="center" >
            <mx:Image source="{defaultLeafIcon}" />
            <s:Line height="100%" x="0" y="-1"  >
                <s:stroke>
                    <s:SolidColorStroke color="0xffbc00" weight="3"/>
                </s:stroke>
            </s:Line>
        </s:VGroup>
        <s:VGroup width="100%" height="100%" paddingTop="5">
            <s:Label id="titleLab" fontSize="18" color="0x63d029"/>
            <s:Label id="contents" width="460" fontSize="16" height="100%" />

        </s:VGroup>                 
    </s:HGroup>

    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.controls.Tree;
            import mx.controls.listClasses.BaseListData;
            import mx.controls.listClasses.IDropInListItemRenderer;
            import mx.controls.treeClasses.TreeListData;
            import mx.events.TreeEvent;
            import mx.core.mx_internal;

            use namespace mx_internal; 
            //树形顶部的图片
            [Bindable] 
            [Embed(source="assets/images/timerImg/history.png")] 
            public var topIcon:Class;

            //树形展开时的图片
            [Bindable] 
            [Embed(source="assets/images/timerImg/triangle-down.png")] 
            public var disclosureOpenIcon:Class; 

            //月份
            [Bindable] 
            [Embed(source="assets/images/timerImg/triangle-bluedown.png")] 
            public var disclosureOpenMonthIcon:Class; 


            //子项用的图片——叶子节点
            [Bindable] 
            [Embed(source="assets/images/timerImg/circle1.png")] 
            public var defaultLeafIcon:Class; 

            //树形关闭（收起）时的图片
            [Bindable] 
            [Embed(source="assets/images/timerImg/triangle-right.png")] 
            public var disclosureClosedIcon:Class; 


            //树形关闭（收起）时的图片
            [Bindable] 
            [Embed(source="assets/images/timerImg/triangle-blueright.png")] 
            public var disclosureClosedMonthIcon:Class; 

            private var _listData:TreeListData; 
            private var listOwner:Tree; 

            override public function get listData():BaseListData
            {
                return _listData;
            }

            override public function set listData(value:BaseListData):void
            {
                if(value){
                    _listData=value as TreeListData; 
                    listOwner=Tree(_listData.owner);
                }
            }

            private function onCreationComplete():void 
            { 
                //初始化完成后进行渲染 
                updateDisplay(); 
            } 


            //渲染，如果是第一次创建则通过onCreationComplete方法调用，如果是从缓存中取出的则直接调用 
            private function updateDisplay():void 
            { 
                //只有具有条目数据并且初始化完成后才允许渲染 
                if (!(_listData && initialized)) return; 

                if(_listData.hasChildren && _listData.item.@top!=null && _listData.item.@top!="" 
                    && _listData.item.@top=="1"){
                    currentState="top"; 
                    if(disclosureTopIcon && disclosureTopIcon.source!=_listData.disclosureIcon) 
                    { 
                        if (_listData.open) { 
                            disclosureTopIcon.source=disclosureOpenIcon; 
                        } else { 
                            disclosureTopIcon.source=disclosureClosedIcon; 
                        } 
                    } 
                    if(topName && topName.label!=_listData.label) 
                    { 
                        topName.label=_listData.label; 
                    } 
                }else if(_listData.hasChildren && _listData.item.@top!=null && _listData.item.@top!="" 
                    && _listData.item.@top=="2"){
                    currentState="month"; 
                    if(disclosureMonthIcon && disclosureMonthIcon.source!=_listData.disclosureIcon) 
                    { 
                        if (_listData.open) { 
                            disclosureMonthIcon.source=disclosureOpenMonthIcon; 
                        } else { 
                            disclosureMonthIcon.source=disclosureClosedMonthIcon; 
                        } 
                    } 
                    if(monthName && monthName.label!=_listData.label) 
                    { 
                        monthName.label=_listData.label; 
                    } 
                }else if (_listData.hasChildren) 
                { 

                    currentState="year"; 

                    if(disclosureIcon && disclosureIcon.source!=_listData.disclosureIcon) 
                    { 

                        if (_listData.open) { 
                            disclosureIcon.source=disclosureOpenIcon; 
                        } else { 
                            disclosureIcon.source=disclosureClosedIcon; 
                        } 
                    } 
                    if(yearName && yearName.label!=_listData.label) 
                    { 
                        yearName.label=_listData.label; 
                    } 
                } 
                else if (!_listData.hasChildren) 
                { 
                    currentState="contact"; 

                    if(dateLab && dateLab.text!=_listData.item.@date) 
                    { 
                        dateLab.text=_listData.item.@date; 
                    } 
                    if(titleLab && titleLab.text!=_listData.item.@title) 
                    { 
                        titleLab.text=_listData.item.@title;
                    } 
                    if(contents && contents.text!=_listData.item.@contents) 
                    { 
                        contents.text=_listData.item.@contents; 
                    }
                } 
            }

            private function disclosureMouseDownHandler(event:Event):void 
            { 
                event.stopPropagation(); 

                if (listOwner.isOpening || !listOwner.enabled) return; 

                var open:Boolean=_listData.open; 
                _listData.open=!open; 


                listOwner.dispatchTreeEvent(TreeEvent.ITEM_OPENING, _listData.item,  
                    this,  
                    event,  
                    !open,  
                    true, 
                    true);
            } 

        ]]>
    </fx:Script>
</s:MXTreeItemRenderer>

上述代码运用

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               pageTitle="时间轴"
               width="100%" height="100%"
               minWidth="955" minHeight="600">
    <s:layout>
        <s:HorizontalLayout paddingLeft="200"/>
    </s:layout>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>  
    <fx:Style source="style/style.css" >
    </fx:Style>
    <fx:Script>
        <![CDATA[

            import mx.events.FlexEvent;

            protected function myTree2_creationCompleteHandler(event:FlexEvent):void
            {
                var item:XML  = this.myTree2.dataProvider[0];     
                this.myTree2.expandChildrenOf(item,true);  
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
        <s:XMLListCollection id="treeData">
            <fx:XMLList xmlns="">
                <group name="2016" top="1"> 
                    <node date="11.24" title="**日志" contents="内容不知道写什么"/>
                    <node date="10.24" title="**信息" contents="请确保文件命名总是以字母开头而不是数字。而以特殊字符开头命名的文件，
                          一般都有特殊的含义与用处（比如 compass[1] 中的下划线就是用来标记跳过直接编译的文件用的）"/>
                    <node date="8.16" title="**信息" 
                          contents="资源的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，
                          当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。"/>
                    <node date="6.24" title="sss信息" contents="微商城订单成功后，网页将收到新订单通知"/>
                    <node name="4月" top="2">        
                        <node date="4.24" title="##信息" contents="微商城订单成功单通知"/>
                        <node date="4.26" title="##信息" contents="不要指定引入资源所带的具体协议"/>
                    </node>
                </group> 
                <group name="2015">
                    <node date="11.24" title="##信息" contents="内容不知道写什么"/>
                    <node date="10.16" title="**信息" contents="幸运机活动时间延长至三个月等"/>
                    <node date="9.24" title="##信息" contents="微商城订单成功后，网页将收到新订单通知"/>
                    <node date="6.24" title="##信息" contents="还有一些情况下，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），
                          抑或一串前缀（比如 3fa89b.main.min.css）。这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。"/>
                </group> 

            </fx:XMLList>
        </s:XMLListCollection>
    </fx:Declarations>

    <mx:Tree id="myTree2" dataProvider="{treeData}" labelField="@name"  styleName="timerInfoTree"
             width="100%" x="0"  y="0" height="100%"  borderColor="0xffffff"
             itemRenderer="com.itemRenderer.timerInfoTreeItem"  variableRowHeight="true"
             creationComplete="myTree2_creationCompleteHandler(event)"/>


</s:Application>

运行效果
这里写图片描述
时间轴-2

备注：由于引用了字体，所以编译的文件很大，可以删除字体的引用，效果如下：
这里写图片描述

代码下载地址：flex-时间轴

慢慢来_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FLEX时间轴代码
01-08
FLEX时间轴代码,时间轴可以拖动，时间粒度为月粒度，功能还不完善，但已经基本可以使用，欢迎下载后修改和补充，此代码仅供学习和研究之用,请勿用于任何商业用途，后果自负.
Flex 时间轴
domzhao2的博客
07-07 146
MovieClip   具有时间轴，一般是动画   Sprite 没有时间轴，   对于非交互式简单形状，请使用 Shape 对象。对于不需要时间轴的交互式对象，请使用 Sprite 对象。对于使用时间轴的动画，请使用MovieClip 对象。   可以参考 荣耀之光的 UI.fla...
大气的jQuery树型时间轴特效
11-07
非常大气的jQuery树型时间轴特效，供大学参考
flex组件时间轴组件
02-28
flex组件时间轴，在flex项目中都有使用的案例，用来设置时间和范围具有很好的作用
Flex_API.rar_flex_flex api
09-20
这些组件可高度定制，适应各种设计需求，并且可以轻松地通过MXML或ActionScript进行组合和扩展。 4. 数据绑定：Flex 提供了数据绑定机制，允许UI组件的属性自动反映模型数据的变化，反之亦然。这种机制简化了数据...
flex_style.rar_flex_flex style_style flex
最新发布
09-23
在"flex_style.rar_flex_flex style_style flex"这个压缩包中，我们可能找到了关于使用Flex样式的实例，这对于初学者理解和掌握Flex布局非常有帮助。 1. **Flex容器与Flex项目**： - Flex容器：任何具有`display: ...
Flex_LCDS_Java.rar_flex_flex java
09-21
标题中的“Flex_LCDS_Java.rar_flex_flex_java”揭示了本教程主要关注的是Flex、LCDS（LiveCycle Data Services）与Java的结合应用。Flex是一种用于创建富互联网应用程序（RIA）的开发框架，而LCDS是Adobe提供的一个...
Flex_KBD.rar_Flex_KBD.rar_flex
09-21
《Flex_KBD: 弹性键盘在CCS C编译器中的实现》 在嵌入式系统开发领域，用户界面的设计至关重要，其中键盘输入设备的灵活性和效率是用户体验的重要组成部分。"Flex_KBD"项目正是针对这一需求，提供了一种在CCS（Code...
flex4 的时间轴动画
bby_19的专栏
08-01 754
flex4 的时间轴动画     http://zhangyulin20083.blog.163.com/blog/static/7762751020101012102747872/我想在未来的某个地方会用到的吧，所以在网上搜到了那么就保存在这里吧，有时间再深入的研究一下： 来源：http://www.puxiao.com/?p=366 Flex4里新增
大气的jQuery树型时间轴特效.zip
07-11
代码简介：大气的jQuery树型时间轴特效是一款非常实用的jquery时间轴特效，是在浏览微俱聚平台的更新日志模块时看到的，觉得很实用和效果非常棒。
Flex中实现带有时间轴的直方图
doomking的专栏
09-15 1555
Flex中的直方图的X轴就是一个显示label的一个轴，无法进行交互，如何实现带有时间轴的直方图，并且每个时间刻度点都可以进行交互呢？其实很简单，自定义一个简单的类重写时间轴，具体就是实现IAxisRenderer接口。 先上个图： 1、首先创建一个类，继承自UIComponent,用来重写X轴的Renderer: public class SimpleAxisRenderer
时间线段树（又称全局线段树）
permi_yaxileni的博客
09-30 752
其实这个算法就是这个名字，用时间节点来建一颗线段树，当然得要求离线操作，强制在线的话一般而言用不了这个方法（当然更大的可能是我没想到）。 这个算法其实不难，只是我学了很久罢了。 首先引入问题，比如要你维护一个并查集块的数目，多次修改边与边之间的关系，每次修改完后问你连通块的数目，路径压缩的并查集显然无法进行删除的操作。 所以就得学习时间线段树，每次操作边时为一个时间节点，建立线段树，我们可以很轻易的知道每条边所存在的时间段，比如第二次操作被添加，第五次操作被删除，2-4就是这条边存在的时间节点，而区间
Flex Graphics 画时间轴测试例子
布丰的专栏
02-09 2514
视频监控的web观看端有视频回放这一块，需要做一个时间轴，下面是根据Graphics画的时间轴的例子 例子做的只是把时间轴网格，时间轴填充和会移动的时间画出来了，很多细节没有，例子中有用Flex画文字的两种实现方式，画时间刻度那种实现不知道怎么改样式 代码如下： <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
给tree组件添加连接线
yixiaojing527的博客
11-22 2112
1.页面渲染 <template> <div class='tree-line'> <el-tree :data="data" :indent='0' :props="defaultProps" @node-click="handleNodeClick"> </el-tree> </div> </template> <-- 注意： ：indent='0'这一项设置一下，..
vue使用甘特图(实现树形结构/一条数据显示双时间轴)
qq_36566924的博客
08-17 5796
1.引用甘特图: impot gantt from “dhtmlx-gantt” 这里引用7.0.7版本本 2.在mounted里面initGanttConfig()〈初始化配置数据〉和getGanttData()〈放入数据〉 3.initGanttConfig为:
vue中利用flex布局实现横向时间轴简化
是日前端
10-28 4349
最终效果： 代码如下： <div class="timeline body-bgcolor"> <!--时间线--> <div class="timeline-title"> <span v-for="item in timeLineList" class="timeline-title-item">{{ item.title }}</span> </div>
FLEX4实现时间轴例子
程序DADA
09-04 2448
总结： mx:horizontalAxis：用来定义X轴； mx:DateTimeAxis：时间轴； dataUnits="seconds"（里面有的属性：milliseconds seconds minutes hours days weeks months years） interval="5"：间隔时间 minimum="{minDate}"：起始时间，绑定到 minDate m
Timeline时间轴
猎梦虚幻研究社
07-23 3350
介绍Timeline（时间轴）的使用方法CSDN的博客添加图片太麻烦了，而且链接网页图片会出现错误，如果需要看详细文章，请访问我的微信公众号《猎梦虚幻研究社》 在蓝图设计图表中右键搜索Timeline或者在变量分类中创建时间轴 确定以后会在蓝图设计图表中看到新创建的时间轴 而此时展开Variables中的Components分类，也能在里面找到这个时间轴。也就是说，当你创建了一个时间轴
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值