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'
}]
}));
}
});
