JS实现的一个小小的时间条(用于显示打卡记录)

cf35 9年前

BrsTimeRange

一个时间条

  • code by baixiaosheng on 2015/7/30
  • html
  • 可以在div里加形如:data-values="0,1,3,4,9,12,18,24" data-positions="13,Brs-bar-red|18" 属性达到添加的效果
  • @param wrapper:外层容器
  • @param width:设置时间条的的宽
  • @param options:配置

    var range = new BrsTimeRange(            'Brs',            360,            {                positions: [{                    point: 6,                    data: [                        {title: '测试', context: '测试值'},                        {title: '测试', context: '测试值'},                        {title: '测试', context: '测试值'},                        {title: '测试', context: '测试值'}                    ],                    color: 'Brs-bar-red'                }, {                    point: 8,                    data: [{title: '测试', context: '测试值'}, {title: '测试', context: '测试值'}]                }],                values: [-1, 5, 6, 8, 62, 12]            }    );    range.addTwoPoint({        start: 0, end: 24, data: [[            {title: '测试', context: '测试值'},            {title: '测试', context: '测试值'},            {title: '测试', context: '测试值'},            {title: '测试', context: '测试值'},            {title: '测试', context: '测试值'}        ], [            {title: '测试', context: '测试值'},            {title: '测试', context: '测试值'},            {title: '测试', context: '测试值'},            {title: '测试', context: '测试值'}        ]]    }).addTwoPoint({        start: 12, end: 15, data: [[            {title: '测试', context: '测试值'},            {title: '测试', context: '测试值'},            {title: '测试', context: '测试值'},            {title: '测试', context: '测试值'}        ], [            {title: '测试', context: '测试值'},            {title: '测试', context: '测试值'},            {title: '测试', context: '测试值'}        ]]    }, 'Brs-bar-red');

    项目主页:http://www.open-open.com/lib/view/home/1438356745113