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