已经很久没有上javaeye(已经习惯这么称呼论坛了),最近工作不顺利,心情也不好,所以一直没有和大家分享extjs的使用经验。
在09年的时候有个思路,想做一个带标签、带有翻页动画的书的界面展现,用来在同一块可视区域展示不同内容,而不是采用现在比较常见的分栏、分块的样式,这样做的好处是:可视区域面积大,在有限的空间内可以展示单栏、单块内容多。当时没有学习extjs,没有实现,前一段做项目,遇到一个同样可以需要这样界面的地方,所以做了出来,和大家分享。
?
测试环境:IE 8.0(精力有限,其他浏览器尚未做到兼容)。
?
先看一下效果图
?
选择了第一个标签(默认)
?
?
?
点击第二个标签
我的思路是这样的:
?
标签切换:
?
右侧有诺干个标签,每个标签做两个,一个是靠左的完全展现的标签,另外一个是有一部分被书页压住的
(至于图片,我是自己用ps做的,各位可以请美工帮忙做一些);
动作有鼠标点击触发,点击某一个尚未置前的标签时,隐藏已经置前的标签,展现对应的被书页压住的那个
标签,这里可以在事前处理函数末尾,增加书页对应内容的展现,比如:书页上展现对应标签的文字等;
?
翻页动画:
?
整个过程类似flash动画帧,时间轴从0ms到150ms 然后从200ms到350ms两个动画完成。
我设计的书页是从右侧翻到左侧的(符合大众习惯),翻页动画由两部分组成:
a)将隐藏在最右侧的书页显示 -> 移动到中间?-> 隐藏该书页 -> 移动到书页的最右侧(归位)0ms~150ms;
停止动作50ms,增加冗余时间,防止两侧书页同时出现,也因为js是单进程,防止extjs定时器出错;
b)将隐藏在中间的左侧书页显示 -> 移动最左侧 -> 隐藏该书页 -> 移动到书页中间(归位)200ms~350ms;
?
?
?
?
?
?
注:本博客文章均已注明原创和转载,如转载本博客文章,需注明原文出处或征求原作者同意。