TWaver HTML5之树形布局
转眼间春节假期已经过完,作为一个职业的程序猿,不知道大家有没有这样的感觉,一天不碰电脑,总觉得生活少点什么。今天是春节后上班的第三天,给大家分享一下我们前段时间的一个需求,需求是这样的:界面中的网元分为不同的域,比如一级域,二级域,三级域,….N级域,而且不同域之间会有连线。对于这个需求,按照常规的想法,使用group岂不是很简单,一级域是一个group,二级域也是一个group,二级域的group是一级域的父亲,以此类推。但是这样有个问题,如果域比较多,会造成group的过度嵌套,界面中group多了之后,不仅用户体验下降,而且会严重影响性能,所以倒不如直接用树,可以很直观的体现各个域之间的层级关系。
下面是布局的代码,代码很简单,相信熟悉twaver的人很容易看懂。
布局中的可以加入动画效果,提升用户体验,关于动画的相关文档可以参考文档:
function move(node, x, y){ var x0=node.getClient('x'); var y0=node.getClient('y'); new twaver.Animate({ from: { x: x0, y: y0 }, to: { x: x, y: y }, type: 'point', delay: 100, dur: 1000, easing: 'easeNone', onUpdate: function (value) { node.setLocation(value.x, value.y); } }).play(); }
如果有对这个示例感兴趣的朋友,可以发邮件索取相关代码,邮箱地址:[email protected]
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。