Jquery时间滑块TimeSlider增强显示。
有刻度,可用CSS设置长短,可以隐藏中间部分刻度的标签。
调用方法:
$("#timeBarSlider")
.slider({
min: 0, max: 1440, range: false, value: 0,
slide: function (event, ui) {
//滑动过程中显示实时的值(时间)
$("#days").val(intToTimeStr(ui.value));
}
})
.slider("pips", { rest: "label" })
.slider("float");
$("#timeBarSlider").on("slidechange", function (e, ui) {
//滑动/点击标签结束后的值(时间)
$("#days").val("结果:" + intToTimeStr(ui.value));
//alert("结果:" + intToTimeStr(ui.value));
});
function setValue() {
//设定值
$("#timeBarSlider").slider('option', 'value', 720); ;
}
//数字(分钟)转时间格式(时:分)的字符串
function intToTimeStr(num) {
var myhour = Math.floor(num / 60);
var myMinute = num % 60;
if (myhour < 10) { myhour = "0" + myhour; }
if (myMinute < 10) { myMinute = "0" + myMinute; }
return myhour + ":" + myMinute;
}
1