已经很久没有上javaeye(已经习惯这么称呼论坛了),最近工作不顺利,心情也不好,所以一直没有和大家分享extjs的使用经验。
在09年的时候有个思路,想做一个带标签、带有翻页动画的书的界面展现,用来在同一块可视区域展示不同内容,而不是采用现在比较常见的分栏、分块的样式,这样做的好处是:可视区域面积大,在有限的空间内可以展示单栏、单块内容多。当时没有学习extjs,没有实现,前一段做项目,遇到一个同样可以需要这样界面的地方,所以做了出来,和大家分享。
测试环境:IE 8.0(精力有限,其他浏览器尚未做到兼容)。
先看一下效果图
选择了第一个标签(默认)
点击第二个标签
我的思路是这样的:
标签切换:
右侧有诺干个标签,每个标签做两个,一个是靠左的完全展现的标签,另外一个是有一部分被书页压住的
(至于图片,我是自己用ps做的,各位可以请美工帮忙做一些);
动作有鼠标点击触发,点击某一个尚未置前的标签时,隐藏已经置前的标签,展现对应的被书页压住的那个
标签,这里可以在事前处理函数末尾,增加书页对应内容的展现,比如:书页上展现对应标签的文字等;
翻页动画:
整个过程类似flash动画帧,时间轴从0ms到150ms 然后从200ms到350ms两个动画完成。
我设计的书页是从右侧翻到左侧的(符合大众习惯),翻页动画由两部分组成:
a)将隐藏在最右侧的书页显示 -> 移动到中间 -> 隐藏该书页 -> 移动到书页的最右侧(归位)0ms~150ms;
停止动作50ms,增加冗余时间,防止两侧书页同时出现,也因为js是单进程,防止extjs定时器出错;
b)将隐藏在中间的左侧书页显示 -> 移动最左侧 -> 隐藏该书页 -> 移动到书页中间(归位)200ms~350ms;
注:本博客文章均已注明原创和转载,如转载本博客文章,需注明原文出处或征求原作者同意。
- 大小: 53.6 KB
- 大小: 53.7 KB
分享到:
相关推荐
Extjs实现翻书效果,翻页会有演示效果。
extjs实现动态树
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
Extjs实现用户登录。。。。。。。。。。。。。。。。。
extjs实现报表
extjs实现增删节查改,跑得起来的extjs,由于太大了,把jar包删了,如差jar包,可以找我要
ExtJS实现Excel的导出功能(poi)
Extjs框架实现类似QQ的聊在功能.好友上线,下线提醒.留言,发表情,来消息提醒等功能
ExtJS实现Excel导出,最常用的可以解决大部分问题
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
Extjs 实现增删改查,可以与后台代码结合起来,利于实现
jSP+EXTJS实现upload UploadDialog
用extjs实现登陆页面的前台验证。
xtJS是一种基于客户端开发的AJAX应用,是一个与...由于项目需求,我们需要实现Excel的导出功能,前台界面是用ExtJS实现。如何实现呢? 使用POI组件实现excel导出功能 //获取问题列表 List<Suggestion> targetStock
extjs实现动态树加载菜单
ExtJS+SSH实现登录及权限拦截完整版
extjs实现一个后台管理框架,界面美观,可换主题颜色
ExtJs的入门书籍,全都是中文版。 还包括一个JUDE文档,关于EXTJS部分功能的UML类结构图。
extjs实现下拉框多选,很实用哦!
ExtJS实现文件下载的方法 前台代码: Ext.get('outputuser').on('click', function(e){ Ext.MessageBox.confirm('提示','确定要导出用户吗?',function(btn){