• 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: "";
              2px; 
             height: 100%;
             top: 0;
             bottom: 0;
             left: 0;
             background: #000; 
             position: absolute; 
    
         }/* 时间轴竖线*/
    
        .timeline .x-list-item::after { 
            content: ""; 
             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'
                }]
    
            }));
        }
    });
    
  • 相关阅读:
    jquery基础认知
    CentOS6.5下samba服务
    [转载]二叉树查找
    更好的理解索引
    【转载】数据库表空间
    [转载]数据库对象
    数据库schema的简介
    [转载]oracle物化视图
    oracle物化视图
    [转载]oracle位图索引
  • 原文地址:https://www.cnblogs.com/ae6623/p/4593234.html
Copyright © 2020-2023  润新知