New Timeline的Toolbar样式设计

本文介绍新版Timeline主页面的Toolbar【Menu】功能实现,包括EventList效果、TimeScale动态修改、Legend配置及MoreInfomation模块。通过使用Ext库,实现了Check选择菜单、点击后悬停菜单等功能,并分享了EventList模块如何与menu关联的技巧。

最近在做新版的Timeline,Toolbar【Menu】的功能基本完成,因此把截图拿出来与各位博友分享一下。

新版Timeline【HTML版本】主页面:

这次主要讲解一下Toolbar【Menu】的功能。

1、Toolbar的主要功能按钮:

这块是用Ext的Toolbar实现的,之前用jQuery.toolbar.js实现,但是在实现Check选择菜单和点击后悬停菜单方面,jQuery.toolbar.js实现起来比较困难,需要自己修改js。

2、EventList效果:

此模块主要应用的Ext的Tree来实现的,虽然暂时没有树状结构但是便于以后分类的扩展,此块的Tree的panel要关联到menu上,这块用了一点小技巧,具体方法是:正常添加Event list的menu,然后用menu的item的html属性添加一个treeGrid的div【设置固定的宽度和高度】,然后添加单击事件,在单击事件中获取业务数据,将业务数据构建成treeStore格式,然后添加到Tree.panel上,将tree.panel绑定到html中的div【renderTo】就可以了,另外提醒一下,就是不用每次点击都做这些操作,需要一个变量记录一下,如果第二次或者之后点击,不需要取数据再load了,只需要显示原有的Event list就可以了。

3、Time Scale:

此块重要是动态修改Timeline模式的时候需要动态修改icon_ok图标,这块难度不大。

4、Legend:

此块主要是menu实现了既包含图标还有checkbox属性,其实这是Ext的toolbar本身就支持的,只需要正确配置其属性就好了。

5、More Infomation

 

主要的功能就介绍这些了,如果有需要深入交流的请给我留言。

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值