Sencha Touch2 时间轴ListPanel
直接贴代码
timeline.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../pub/touch-2.3.1/resources/css/sencha-touch.css">
<script type="text/javascript" src="../pub/touch-2.3.1/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
<style>
.timeline{
padding-left:50px;
}
.timeline .x-list-item{
box-shadow: 0px 1px 0px rgba(255,255,255,.1) ;
border-radius: 6px;
margin-left:5px;
}
.timeline .x-list-item::before {
content: "";
width: 2px;
height: 100%;
top: 0;
bottom: 0;
left: 0;
background: #000;
position: absolute;
}/* 时间轴竖线*/
.timeline .x-list-item::after {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
left:-4px;
top: 36px;
background: #000;
border: 2px solid #333;
z-index: 10;
border-color: #ccc;
}/* 时间轴圆点 */
.timeline .x-list-item:hover::after { border-color: #333 ;} /*鼠标放在Item时间轴圆点变大*/
</style>
<title>列表</title>
</head>
<body></body>
</html>
app.js
Ext.Loader.setConfig({
disableCaching: false
});
/*
* 时间轴特效
* @落雨 http://ae6623.cn
*/
Ext.application({
name: 'list',
requires: ['Ext.List'],
launch: function () {
Ext.Viewport.add(Ext.create('Ext.List', {
fullscreen: true,
cls: 'timeline',
disableSelection: true,
itemTpl: '<div>流程:{activity_name}-{activity_id}</div><div>当前节点:{date}</div>',
itemHeight: 60,
data: [{
activity_name: '审批1',
activity_id: 123,
date: '2015-06-01'
},
{
activity_name: '审批2',
activity_id: 123,
date: '2015-06-01'
},
{
activity_name: '审批3',
activity_id: 123,
date: '2015-06-01'
},
{
activity_name: '审批4',
activity_id: 123,
date: '2015-06-01'
},
{
activity_name: '审批5',
activity_id: 123,
date: '2015-06-01'
},
{
activity_name: '审批6',
activity_id: 123,
date: '2015-06-01'
}]
}));
}
});
Sencha Touch2 时间轴ListPanel的更多相关文章
- iOS之TimeLine(时间轴)的实现
这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...
- 08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...
- [原创]首次制作JQueryUI插件-Timeline时间轴
特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...
- SmohanTimeLine.js 酷炫的时间轴效果
展示地址 点此下载 原文出处 一.参数说明 item : '.item', //项目元素 top : 30, //与下一行的间距 pointWidth : 22, //时间点宽度 cornerWidt ...
- jquery时间轴幻灯展示源代码
查看效果:http://hovertree.com/texiao/jquery/75/ 源代码下载:http://hovertree.com/h/bjaf/8jlpc2wu.htm 效果图如下: 代码 ...
- Timeline Portfolio - 时间轴作品集效果
这里分享一个超炫的时间轴展示作品集效果.设计师和前端开发人员可以借助这个效果来制作新颖的作品集和个人简历.时间轴专门用来呈现出年代的一系列事件.您可以把这种效果嵌入各种媒体,包括微博,视频和地图,并把 ...
- JQuery+HTML5+CSS3制作时间轴插件，支持响应式布局
一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...
- 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！
前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...
- 垂直时间轴HTML
1.概述 用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰.一目了然能够看清事情发生的过程,UI页面也显示的那么清晰.如何用css+html做出时间轴展示事件点的?先来看看下面的 ...
随机推荐
- php5.5新函数array_column
php5.5新增了一个新的数组函数,感觉挺使用的,低版本的实现按照如下实现 if(!function_exists('array_column')){ function array_column($i ...
- C++求平均数
题目内容:求若干个证书的平均数. 输入描述:输入数据含有不多于5组的数据,每组数据由一个整数n(n<=50)打头,表示后面跟着n个整数. 输出描述:对于每组数据,输出其平均数,精确到小数点后3位 ...
- R语言的日期运算
写hive SQL查询, 需要从导入的参数, 自动累加日期. 从而实现一个自动的,多个日期的统计过程 R语言的日期运算超级简单. > test<-Sys.Date() > test ...
- SRF之页面
页面呈现采用Razor模板 1.母模板说明 _Main.cshtml:基础母模板 _ListLayout.cshtml:列表页面 _EditDialog.cshtml:编辑对话框 _EditLay ...
- arcgis中使用excel中x,y坐标创建点问题
文件——从x,y中添加,可以显示点的位置 右击图层导出数据时,出现无法绘制图形,生成shapefile文件的情况.经过排除数据发现 当x,y坐标值中出现null等异常值时,会出现上述无法导出的情况.
- DTW
DTW主要是应用在孤立词识别的算法,用来识别一些特定的指令比较好用,这个算法是基于DP(动态规划)的算法基础上发展而来的.这里介绍语音识别就先介绍下语音识别的框架,首先我们要有一个比对的模版声音,然后 ...
- hdu 1509 Windows Message Queue
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1509 Windows Message Queue Description Message queue ...
- Redis 在windows环境下安装
一.下载适合自己的windows版本 下载地址:https://github.com/dmajkic/redis/downloads 当你解压后,就拥有了全套的应用文件
- C#取枚举描述
一直都觉得枚举是个很不错的东西,可以给我们带来很多方便,而且也增加代码的可读性. 我在之前已经介绍过枚举的简要应用了,再次再来写下怎么获取枚举的描述. 源码如下: 首先,我们定义个含有描述的枚举类型 ...
- The ObjectContext instance has been disposed and can no longer be used for operations that require a connection.
The ObjectContext instance has been disposed and can no longer be used for operations that require a ...