New Timeline的Toolbar样式设计

最近在做新版的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

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

我们可以失望,但不能盲目。

New Timeline的Toolbar样式设计

相关文章:

你感兴趣的文章:

标签云: