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做出时间轴展示事件点的?先来看看下面的 ...
随机推荐
- 仿酒仙网的一款jQuery侧栏弹出导航栏特效
仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...
- 获取android SDCard存储大小
//File path = Environment.getDataDirectory();//手机内置空间 1.获取SD卡的路径 File path = Environment.getExternal ...
- cxGrid使用汇总（一）
1. 去掉cxGrid中台头的Box 解决:在tableview1的ptionsview的groupbybox=false; 2．统计功能 解决:(1) tableview 1. tableview1 ...
- 西门子SIMATIC IT平台
西门子公司的SIMATIC IT平台基于ANSI/ISA S95标准开发,包含的功能组件覆盖了ISA S95规定的生产业务操作模型,同时也满足MESA所确定的MES系统11项功能要求. SIMATIC ...
- python2.7抓取豆瓣电影top250
利用python2.7抓取豆瓣电影top250 1.任务说明 抓取top100电影名称 依次打印输出 2.网页解析 要进行网络爬虫,利用工具(如浏览器)查看网页HTML文件的相关内容是很有必要,我使用 ...
- Power of Four
Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Example:Giv ...
- bzoj 1798 [Ahoi2009]Seq 维护序列seq
原题链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1798 线段树区间更新: 1. 区间同同时加上一个数 2. 区间同时乘以一个数 #inclu ...
- 解压vmlinuz和解压initrd（initramfs)
有时就算只得到一个Linux kernel的rpm包或者直接是编译后的vmlinuz和initrd的binary文件,也需要了解其中的一些细节,可能需要去查找这些binary有没有将我想要的patch ...
- 为什么学习Python
因为做iOS开发的,之前一直用OC,但是突然有一天苹果说出Swift,但是那时候的Swift真的是Bug多多,语法都不固定,所以只是大致看了看,而一年多之后,Swift已经发布2.0了,语言也相对稳定 ...
- 一些Iphone sqlite 的包装类
相信很多人用iphone的Sqlite不会直接用C的方法,要么自己包装一层Object c的访问方法,要么用CoreData,下面我整理些目前所了结的一些Sqlite 包装类. 1.CoreData ...