timerAxis
时间轴选取控件
长这样子
引用方式
将对应的css,js引入html页面中
调用方式
var t1 = timerAxis.createAxis({
//目标盒子,只要一个盒子就行,但是需要知道盒子的宽度
box:document.querySelector('.box2'),
//mousemove的callback 这里可以对时间进行限定,比如移动距离必须是30分钟的间隔,
//返回时间数组,需要return对时间的处理
timeCallback:function(arr){
let gap = 30;
return [Math.round(arr[0]/gap)*gap,Math.round(arr[1]/gap)*gap];
},
//鼠标抬起的回调,返回时间的数组
mouseupCallback:function(timeArr){
console.log(timeArr,'timeArr')
},
//设置时间的后的回调,比如通过时间的controler设置时间,成功返回true 否则返回false
setTimeCallback:function(res){
console.log('set time callback:',res);
}
});
同一个box里面装载多个控件(多次调用)
var t1 = timerAxis.createAxis({
box:document.querySelector('.box2')
});
var t2 = timerAxis.createAxis({
box:document.querySelector('.box2')
});
var t3 = timerAxis.createAxis({
box:document.querySelector('.box2')
});
参数说明
- box:必须,目标盒子,只要一个盒子就行,但是需要知道盒子的宽度,用来装载timerAxis的盒子
- timeCallback:可选,mousemove的callback 这里可以对时间进行限定,比如移动距离必须是30分钟的间隔,返回时间数组,需要return对时间的处理
- mouseupCallback:可选,鼠标抬起的回调,返回时间的数组
- setTimeCallback:可选,设置时间的后的回调,比如通过时间的controler设置时间,成功返回一个包含status和msg的对象,表示设置是否成功及对应信息
获取各种事件模块的信息
- getSliderMap:获取所有slider的map px,没有顺序
- getSliderArr: 获取所有slider对应的arr px,从小到大的排序
- getSliderArrTime://获取所有slider对应的arr,并且是转换成时间 08:09 格式,从小到大的排序
- setTime:根据给定的时间生成对应的时间轴,如果成功(在范围内)返回true,否则返回false,参数 timeArr,时间数组[08:00,14:30]
- deleteTime:删除某一个时间值,从pubData里面删除,并且删除对应的slider,传入要删除的slider,参数时要删除的slider,即dom 元素
资源地址:timerAxis