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做出时间轴展示事件点的?先来看看下面的 ...
随机推荐
- LtUpload上传组件
<?php/** * The Upload class * @author Alex Lee <iuyes@qq.com> * @license http://opensource. ...
- dedecms 根据key取得联动类型(enum)值
---恢复内容开始--- //$key:如城市的ID,$enum_file data/enums中的文件 function get_enum_data($key, $enum_file) { ...
- php使用swoole实现一个简单的多人在线聊天群发
聊天逻辑的好多细节没有实现,只实现群发. php代码: $serv = new swoole_websocket_server("127.0.0.1",3999); //服务的基本 ...
- DevExpress 中 WaitForm 使用
第一步: 在程序中拖入: splashScreenManager1 控件 在需要处理的地方 使用以下语句来打开 WaitForm窗体(当然需要在 splashScreenManager1控件中绑定一个 ...
- USB设备驱动
在Linux 内核中,使用usb_driver 结构体描述一个USB 设备驱动,usb_driver 结构体的定义如代码清单20.11 所示.代码清单20.11 usb_driver 结构体 stru ...
- sql语句查询经纬度范围
指定一个经纬度,给定一个范围值(单位:千米),查出在经纬度周围这个范围内的数据. 经度:113.914619 纬度:22.50128 范围:2km longitude为数据表经度字段 latitude ...
- CDN 内容分发网络技术
1.前言 Internet的高速发展,给人们的工作和生活带来了极大的便利,对Internet的服务品质和访问速度要求越来越高,虽然带宽不断增加,用户数量也在不断增加,受Web服务器的负荷和传输距离等因 ...
- .net 高效管理稀缺资源（数据库资源，文件资源等）
MSDN建议按照下面的模式实现IDisposable接口: public class Foo: IDisposable { public void Dispose() { Dispose(true); ...
- Openstack:ice-house安装过程
#apt-get install ntpdpkg-reconfigure tzdata --> Asia -->Shuanghai #apt-get install python-mysq ...
- libmemcached upcoming ISO C++ standard, C++0x
在编译我的小程序的时候,触发了一个编译错误,程序中使用了libmemcached,错误如下: 1 2 3 4 5 6 7 8 9 In file included from /usr/lib/gcc/ ...