0
我一直在尋找一個簡單的jQuery時間滑塊與我的谷歌整合地圖第3 webmap,我發現這個代碼的完美工作:更改jQuery UI的時間滑塊間隔小時,並添加蜱
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.ui-slider-range {
background: rgb(255, 130, 37);
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script>
$(function() {
function pad(num, size) {
var s = num + "";
while (s.length < size) s = "0" + s;
return s;
}
var formatSecs = function (totalsecs) {
var hour = parseInt(totalsecs/3600, 10) % 24;
var min = parseInt(totalsecs/60, 10) % 60;
var secs = totalsecs % 60;
return pad(hour, 2) + ":" + pad(min, 2) + ":" + pad(secs, 2);
};
$("#slider-range").slider({
range: true,
min: 0,
max: 86400,
values: [7200, 72000],
slide: function (event, ui) {
var min = ui.values[0];
var max = ui.values[1];
$("#amount").val(formatSecs(min) + " - " + formatSecs(max));
}
});
$("#amount").val(formatSecs($("#slider-range").slider("values", 0)) + " - " + formatSecs($("#slider-range").slider("values", 1)));
});
</script>
</head>
<body>
<p>
<label for="amount">Time range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</body>
</body>
</html>
但唯一的問題是切換在秒間隔內移動。我只是希望它能夠以小時爲單位移動,所以它不那麼流暢,或者如果過渡不能改變,我想在底部添加刻度,就像這個link中用戶「pliablepixels」所示的例子,所以在用戶至少可以測量下一個小時他們可以將滑塊拉到哪裏。
真聰明。 謝謝! – Greenmachine