Я бы хотел использовать слайдер в HTML-форме, используя jQuery. Ползунку нужны значения от 00:00 до 23:55, и он должен обрабатывать его для времени начала и окончания. Из двух значений, сгенерированных на слайде, должна быть сгенерирована таблица (я полагаю, с каким-то циклом for), причем все время между временем начала и временем окончания отображается с шагом в пять минут.
В качестве альтернативы можно использовать два меню выбора с начальными и конечными значениями (второе должно быть создано динамически, я полагаю, что конечный пользователь не может установить время окончания до времени начала).
Я бы предпочел иметь логику в jQuery, так как значительным размером приложения является jQuery.
Если бы кто-то мог помочь или даже предложить, с чего начать, я был бы признателен.
Dan
UPDATE
Хорошо, ребята, мне удалось заставить ползунок работать с пользовательским интерфейсом jQuery, и теперь все, что мне нужно сделать, это взять сгенерированные значения и перебрать его для создания таблицы со всеми временами между двумя значениями:
var startTime;
var endTime;
$("#slider-range").slider({
range: true, min: 0, max: 1439, values: [540, 1020], step:5, slide: slideTime, /*change: */
});
function slideTime(event, ui){
var minutes0 = parseInt($("#slider-range").slider("values", 0) % 60);
var hours0 = parseInt($("#slider-range").slider("values", 0) / 60 % 24);
var minutes1 = parseInt($("#slider-range").slider("values", 1) % 60);
var hours1 = parseInt($("#slider-range").slider("values", 1) / 60 % 24);
startTime = getTime(hours0, minutes0);
endTime = getTime(hours1, minutes1);
$("#time").html('Opening time: ' + startTime + '<br /> Closing time: ' + endTime);
}
function getTime(hours, minutes) {
minutes = minutes + "";
if (hours == 12) {
hours = 12;
}
if (hours > 12) {
hours = hours ;
}
if (minutes.length == 1) {
minutes = "0" + minutes;
}
return hours + ":" + minutes ;
}
slideTime();
Вот хороший маленький урок, чтобы разобраться со временем: Использование ползунка пользовательского интерфейса jQuery для выбора диапазона времени
Теперь, если кто-нибудь может помочь мне вывести время в таблице, это будет оценено; -D
Dan
ОБНОВЛЕНИЕ СНОВА
ОК, это почти сделано, я создал таблицу из ползунка, и теперь все, что я хочу сделать, это передать значение из выпадающего списка в флажки. Так, например, если кто-то выбирает 3-е значение в списке, должен быть выбран каждый третий флажок. Я думал, что это будет так же просто, как селектор nth-child, но тестовое значение 3 не работает
Есть идеи, ребята? Исходный код здесь и тестовый пример здесь: тест слайдера , как вы можете видеть, я пытаюсь пройти третий выбранный, но код не работает. это происходит, если я изменяю $ ('. chx: nth-child (3)') на $ ('. chx: odd') или $ ('. chx: even'), но это не годится, так как значение динамически генерироваться
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="stylesheets/custom-theme/jquery-ui-1.8.6.custom.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var startTime;
var endTime;
$("#slider-range").slider({
range: true, min: 0, max: 1439, values: [540, 1020], step:5, slide: slideTime, /*change: */
});
function slideTime(event, ui){
var minutes0 = parseInt($("#slider-range").slider("values", 0) % 60);
var hours0 = parseInt($("#slider-range").slider("values", 0) / 60 % 24);
var minutes1 = parseInt($("#slider-range").slider("values", 1) % 60);
var hours1 = parseInt($("#slider-range").slider("values", 1) / 60 % 24);
startTime = getTime(hours0, minutes0);
endTime = getTime(hours1, minutes1);
$("#time").html('Opening time: ' + startTime + '<br /> Closing time: ' + endTime);
}
function getTime(hours, minutes) {
minutes = minutes + "";
if (hours == 12) {
hours = 12;
}
if (hours > 12) {
hours = hours ;
}
if (minutes.length == 1) {
minutes = "0" + minutes;
}
return hours + ":" + minutes ;
}
function getTimeloop(minutesloop) {
minutesloop = minutesloop + "";
if (minutesloop.length == 1) {
minutesloop = "0" + minutesloop;
}
return minutesloop ;
}
slideTime();
$('#generateTable').click(function(){
var startLoop = parseInt($("#slider-range").slider("values", 0));
var endLoop = parseInt($("#slider-range").slider("values", 1));
$('#table').remove();
$('<table id="table"><tr><th>Times</th><th>Bookable</th><tr>').insertAfter('#generateTable');
for(i = startLoop; i < endLoop; i+=5)
{
$('<tr><td>' + parseInt(i/ 60 % 24) + ':' + getTimeloop(parseInt(i % 60)) + '</td><td><input class="chx" name="' + parseInt(i/ 60 % 24) + ':' + getTimeloop(parseInt(i % 60)) + '" type="checkbox" value="' + parseInt(i/ 60 % 24) + ':' + getTimeloop(parseInt(i % 60)) + '" /></td></tr>').appendTo('#table');
}
$('.chx:nth-child(3)').attr('checked', true);
});
});
</script>
<style>
#slider-range{width:800px;}
#slider-range,#time{margin:10px;display:block;}
</style>
</head>
05
10
15
20
25
30
35
40
45
50
55
60
сгенерировать таблицу