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做出时间轴展示事件点的?先来看看下面的 ...
随机推荐
- Spark官方文档——独立集群模式（Standalone Mode）
除了部署在Mesos之上, Spark也支持独立部署模式,包括一个Spark master进程和多个 Spark worker进程.独立部署模式可以运行在单机上作为测试之用,也可以部署在集群上.如果你 ...
- C语言警告：warning C4018: “<”: 有符号/无符号不匹配
问题如下: 代码出问题之处: 原因分析: strlen返回一个无符号整型,也就是unsigned型,比较时应该两边的数据类型相同,故严格上来说,应该将m定义为unsigned型. 修改 ...
- IOS下载资源zip到本地然后读取
思路是 1.ios下载服务器上的zip资源包(图片,声音等经过zip压缩的资源包)到本地 2.解压zip到程序目录 3.从程序目录加载资源文件 一.下载zip资源 [cpp]-(NSString*)D ...
- Java 需要记得、了解的关键词 （Java 学习中的小记录）
Java 需要记得.了解的关键词 (Java 学习中的小记录) 作者:王可利(Star·星星) 总结:本次随笔,仅且拿来平时翻阅记忆用
- NOJ1066-堆排序
堆排序 时间限制(普通/Java) : 1000 MS/ 3000 MS 运行内存限制 : 65536 KByte总提交 : 414 测试通过 : 220 比 ...
- MIFARE系列1《MIFARE简介》
随着社会的发展,智能卡在很多领域得到了广泛的应用.特别是非接触卡,由于使用方便以及功能强大的特点,在管理.公交.工作证.身份识别等领域得到了快速的普及和推广. 非接触卡已经逐步发展成为一个独立的跨学科 ...
- Php+Redis 实现Redis提供的lua脚本功能
<?php require_once "predis-0.8/autoload.php"; $config['schema'] = 'tcp'; $config['host' ...
- hdu 1026 Ignatius and the Princess I
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1026 Ignatius and the Princess I Description The Prin ...
- golang构造函数与转换函数
golang的每种类型, 凡是用type定义的类型, 其类型名既是其构造函数,也是其转换函数. 其中,构造函数后眼{...}, 转换函数后跟(...)
- iOS UI高级之网络编程（HTTP协议）
HTTP协议的概念 HTTP协议,Hyper Text Transfer Protocol (超文本传输协议)是用于从万维网服务器传送超文本到本地浏览器的传输协议,HTTP是一个应用层协议,由请求和响 ...