/**
* 轻量级控件,调用函数生成时间选择控件,确认后调用回调函数返回data;
* @param cb 回调函数 例:selectTime(function(data){console.log(data.time.toString()))}
*/
var selectTime = function(cb){
var html = '
'
+'
'
+ '
'
+ '
'
+ '
'
+ '
'
+ '
'
+ '
'
+ '
'
+'
'
$("body").append(html);
var html = "";
for(var i = 0;i<24;i++){
if(i<10){
$("#time-line .hour ul").append(html+"0"+i+"");
}else{
$("#time-line .hour ul").append(html+i+"")
}
}
var html = "";
for(var i = 0;i<60;i++){
if(i<10){
$("#time-line .minute ul").append(html+"0"+i+"");
}else{
$("#time-line .minute ul").append(html+i+"")
}
}
var html = "";
for(var i = 0;i<60;i++){
if(i<10){
$("#time-line .second ul").append(html+"0"+i+"");
}else{
$("#time-line .second ul").append(html+i+"")
}
}
var liHeight = 30;
var startY;//按下抬起的开始点
var touchPosition;//触摸点
var beginY;//计算速度开始位置,随时更新
var v;//滑动速度
var time = {};
time.toString = function(){
return time.hours+":"+time.minutes+":"+time.seconds;
}
$("#time-line").css("height",liHeight*5+"px")
$("#time-line .focus").css("lineHeight",liHeight+"px").css("fontSize",liHeight+"px").css("color","#55DB66")
$("#time-line ul li:nth-child(1)").each(function(){
$(this).css("color","#55DB66")
$(this).css("fontSize",liHeight+"px")
});
$("#time-line ul li").css("line-height",parseInt($("#time-line ul li").css("height"))+"px")
$("#time-line ul").bind("touchstart",function(event){
if(event.originalEvent.targetTouches.length == 1){
event.preventDefault();
var touch = event.originalEvent.targetTouches[0];
startY = touch.screenY;
touchPosition = touch.screenY;
//开始记录
setInterval(function(){
beginY = touchPosition;
setTimeout(function(){
var count =(touchPosition - beginY)/100
if(Math.abs(count) > 0.5){
v = count;
}else{
v = 0;
}
},200)
},100);
}
})
$("#time-line ul").bind("touchmove",function(event){
if(event.originalEvent.targetTouches.length == 1){
event.preventDefault();
var touch = event.originalEvent.targetTouches[0];
var top = $(this).css("top");
var offset = touch.screenY-startY;
startY = touch.screenY;
touchPosition = touch.screenY;
$(this).css("top",(parseInt(top)+offset)+"px");
var nowTop = parseInt($(this).css("top"));
var index = Math.round((liHeight*3-nowTop)/liHeight);
$(this).find("li").each(function(){
$(this).css("color","")
$(this).css("fontSize","initial")
})
$(this).find("li:nth-child("+index+")").each(function(){
$(this).css("color","#55DB66")
$(this).css("fontSize",liHeight+"px")
})
}
})
$("#time-line ul").bind("touchend",function(event){
//惯性滑动
var s = v * 300;
var b = parseInt($(this).css("top"));
$(this).animate({top:(b+s)+"px"},v*10,function(){
var nowTop = parseInt($(this).css("top"));
$(this).css("top",Math.round((nowTop/liHeight))*liHeight+"px")
var nowTop = parseInt($(this).css("top"));
var ulHeight = $(this).height();
//计算溢出
if(nowTop > liHeight*2){
//向下溢出
$(this).animate({top:liHeight*2+"px"},1,function(){
$(this).find("li").each(function(){
$(this).css("color","")
$(this).css("fontSize","initial")
});
var index = Math.round((liHeight*3-nowTop)/liHeight);
var i = 0;
$(this).find("li:nth-child(1)").each(function(){
$(this).css("color","#55DB66")
$(this).css("fontSize",liHeight+"px")
})
})
}else if(nowTop < -(ulHeight-liHeight*3)){
//向上溢出
$(this).animate({top: -(ulHeight-liHeight*3)+"px"},1,function(){
$(this).find("li").each(function(){
$(this).css("color","")
$(this).css("fontSize","initial")
});
$(this).find("li:nth-last-child(1)").each(function(){
$(this).css("color","#55DB66")
$(this).css("fontSize",liHeight+"px")
})
})
}else{
//定位
$(this).animate({top:nowTop+"px"},1,function(){
$(this).find("li").each(function(){
$(this).css("color","")
$(this).css("fontSize","initial")
});
var index = Math.round((liHeight*3-nowTop)/liHeight);
$(this).find("li:nth-child("+index+")").each(function(){
$(this).css("color","#55DB66")
$(this).css("fontSize",liHeight+"px")
})
})
}
});
})
$("#time-line .make-sure").bind("click",function(){
$("#time-line .hour ul").each(function(){
index = Math.abs((parseInt($(this).css("top"))-liHeight*2)/liHeight);
time.hours = $(this).find("li:nth-child("+(index+1)+")").html();
})
$("#time-line .minute ul").each(function(){
index = Math.abs((parseInt($(this).css("top"))-liHeight*2)/liHeight);
time.minutes = $(this).find("li:nth-child("+(index+1)+")").html();
})
$("#time-line .second ul").each(function(){
index = Math.abs((parseInt($(this).css("top"))-liHeight*2)/liHeight);
time.seconds = $(this).find("li:nth-child("+(index+1)+")").html();
})
$("#time-line").animate({top:'-100%'},400,"linear",function(){
$(this).remove();
if(cb instanceof Function){
var data = {};
data.time = time;
cb(data)
}
})
})
$("#time-line .make-cancel").bind("click",function(){
$("#time-line").animate({left:'-100%'},400,"linear",function(){
$(this).remove();
});
})
}