Форум программистов, компьютерный форум, киберфорум
JavaScript
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > JavaScript
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.68/19: Рейтинг темы: голосов - 19, средняя оценка - 4.68
0 / 0 / 0
Регистрация: 06.11.2013
Сообщений: 45
1

Ползунок времени

17.06.2014, 13:32. Показов 3499. Ответов 9
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Есть ползунок. Код
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<style>
/* Ширина слайдера */
#slider {
width: 200px;
}
/* Контейнер слайдера */
.ui-slider {
position: relative;
}
 
#minCost,#maxCost  {
width:60px;
}
 
/* Ползунок */
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 13px; /* Задаем нужную ширину */
height: 23px; /* и высоту */
background: url(slider-handle.png) no-repeat; /* картинка изображающая ползунок. Или можно залить цветом, задать бордюр и скругления */
cursor: pointer
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
overflow: hidden;
}
/* горизонтальный слайдер (сама полоса по которой бегает ползунок) */
.ui-slider-horizontal {
height: 3px; /* задаем высоту согласно дизайна */
}
/* позиционируем ползунки */
.ui-slider-horizontal .ui-slider-handle {
top: -5px;
margin-left: -6px;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
/* оформление полосы по которой ходит ползунок */
.ui-widget-content {
height:10px;
border: 1px solid #D4D4D4;
background: #fff;
}
/* оформление активного участка (между двумя ползунками) */
.ui-widget-header {
border: 1px solid #D4D4D4;
background: #53A2E4;
}
/* скругление для полосы слайдера */
.ui-corner-all {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<input type="text" id="minCost" value="0"/>
<span>-</span>
<input type="text" id="maxCost" value="24"/>
<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider">
<script type="text/javascript">
 
jQuery("#slider").slider({
min: 0,
max: 24,
values: [0,24],
range: true,
step:0.01,
stop: function(event, ui) {
jQuery("input#minCost").val(jQuery("#slider").slider("values",0));
jQuery("input#maxCost").val(jQuery("#slider").slider("values",1));
},
slide: function(event, ui){
jQuery("input#minCost").val(jQuery("#slider").slider("values",0));
jQuery("input#maxCost").val(jQuery("#slider").slider("values",1));
}
});
 
jQuery("input#minCost").change(function(){
var value1=jQuery("input#minCost").val();
var value2=jQuery("input#maxCost").val();
 
if(parseInt(value1) > parseInt(value2)){
value1 = value2;
jQuery("input#minCost").val(value1);
}
jQuery("#slider").slider("values",0,value1);
});
jQuery("input#maxCost").change(function(){
var value1=jQuery("input#minCost").val();
var value2=jQuery("input#maxCost").val();
 
if (value2 > 24) { value2 = 24; jQuery("input#maxCost").val(24)}
 
if(parseInt(value1) > parseInt(value2)){
value2 = value1;
jQuery("input#maxCost").val(value2);
}
jQuery("#slider").slider("values",1,value2);
});
</script>
</body>
</html>
Код можно сохранить в формате html и открыть у Вас на компьюетере.

Нужно чтобы при передвижении ползунков в связанных input-ax было: 01.00-01.59, а не 01.00-01.99 как сейчас.

Есть ответ http://stackoverflow.com/quest... r-for-time, но не знаю как вставить в мой пример.
Миниатюры
Ползунок времени  
0
Лучшие ответы (1)
Сообщение: #6331015
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 17.06.2014, 13:32
Ответы с готовыми решениями:

Ползунок на JS
Подскажите как такой ползунок сделать на JS?

Ползунок (slider) на JavaScript
Помогите пожалуйста, очень срочно нужен простенький ползунок на JS, у кого нибудь есть? Пыталась...

Как создать ползунок?
привет всем как сделать ползунок на примере тарифного калькулятора http://timeweb.ru Добавлено...

Ползунок с полем ввода значений
Как можно сделать ползунок с полем ввода значений как на сайте http://www.eldorado.ru/cat/2301099/?

9
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625
17.06.2014, 14:28 2
собачьего языка JQuery не знаю и знать не хочу
поэтому чисто теоретически

из того, что вы помещаете в качестве значения в инпуты, необходимо выделить дробную часть, умножить её на 60 и округлить

01.39
.39 >> Math.round (.39 * 60) >> 23
01.23
1
0 / 0 / 0
Регистрация: 06.11.2013
Сообщений: 45
17.06.2014, 14:56  [ТС] 3
Спасибо за ответ, но мне нужна именно реализация в jQuery.
0
82 / 82 / 38
Регистрация: 15.03.2013
Сообщений: 280
17.06.2014, 15:14 4
Там же, в той ссылке что Вы привели как раз и есть реализация - перенесите ее на свой пример.
Например как-нибудь так:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

jQuery("#slider").slider({
    min: 0,
    max: 1440,
    values: [0,24],
    range: true,
    step:15,
    stop: function(event, ui) {
 
        var time_min, time_max;
            time_min=getTime(ui.values[0]);
            time_max=getTime(ui.values[1])
        jQuery("input#minCost").val(time_min['h']+':'+time_min['m']);
        jQuery("input#maxCost").val(time_max['h']+':'+time_max['m']);
    },
    slide: function(event, ui){
        var time_min, time_max;
            time_min=getTime(ui.values[0]);
            time_max=getTime(ui.values[1])
        jQuery("input#minCost").val(time_min['h']+':'+time_min['m']);
        jQuery("input#maxCost").val(time_max['h']+':'+time_max['m']);
    }
});
 // Этот участок кода исправьте сами
jQuery("input#minCost").change(function(){
    var value1=jQuery("input#minCost").val();
    var value2=jQuery("input#maxCost").val();
     
    if(parseInt(value1) > parseInt(value2)){
        value1 = value2;
        jQuery("input#minCost").val(value1);
    }
    jQuery("#slider").slider("values",0,value1);
});
 
jQuery("input#maxCost").change(function(){
    var value1=jQuery("input#minCost").val();
    var value2=jQuery("input#maxCost").val();
     
    if (value2 > 24) { value2 = 24; jQuery("input#maxCost").val(24)}
     
    if(parseInt(value1) > parseInt(value2)){
    value2 = value1;
    jQuery("input#maxCost").val(value2);
    }
    jQuery("#slider").slider("values",1,value2);
 // Этот участок кода исправьте сами
});
function getTime(time){
     var hours, minutes, time_obj={};
     hours = Math.floor(time / 60);
     minutes = time - (hours* 60);
    time_obj['h']=hours;
    time_obj['m']=minutes;
    for(var key in time_obj){
        if(time_obj[key] == 0){
            time_obj[key]='00';
        }
        if(time_obj[key].length == 1){
            time_obj[key]='0'+time_obj[key];
        }
    }
    return time_obj;
}
Это на скорую руку, там могут быть ошибки, да и привести к нормальному виду не мешает.
1
0 / 0 / 0
Регистрация: 06.11.2013
Сообщений: 45
17.06.2014, 16:16  [ТС] 5
Спасибо.И если захотите "допилить" я не против)
0
82 / 82 / 38
Регистрация: 15.03.2013
Сообщений: 280
17.06.2014, 16:35 6
Что Вы предполагаете вводить в инпуты? Время в каком виде?
Вот чуть исправленный вариант, но все еще без разбора пользовательского ввода:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

jQuery("#slider").slider({
    min: 0,
    max: 1440,
    values: [0,24],
    range: true,
    step:1,
    change: function(event, ui){
        var time_min, time_max;
            time_min=getTime(ui.values[0]);
            time_max=getTime(ui.values[1])
        jQuery("input#minCost").val(time_min['h']+':'+time_min['m']);
        jQuery("input#maxCost").val(time_max['h']+':'+time_max['m']);
    },  
    slide: function(event, ui){
        var time_min, time_max;
            time_min=getTime(ui.values[0]);
            time_max=getTime(ui.values[1])
        jQuery("input#minCost").val(time_min['h']+':'+time_min['m']);
        jQuery("input#maxCost").val(time_max['h']+':'+time_max['m']);
    },
    
});
 
 
 
jQuery("input#maxCost,input#minCost").change(function(){
    var target,value=jQuery(this).val();
    target=jQuery(this).attr('id');
    target=target.slice(0,3);
    /*
     * Здесь надо разобрать введенное ползователем значение (value) и привести его к минутам
     * то есть должно получиться число от 0 до 1440
     */
 
    if( target === 'min' ){
        target=0;
    }else{
        target=1;
    }
 
    jQuery("#slider").slider("values",target,value);
 
 
});
 
function getTime(time){
     var hours, minutes, time_obj={};
     hours = Math.floor(time / 60)+'';
     minutes = time - (hours* 60)+'';
    time_obj['h']=hours;
    time_obj['m']=minutes;
    for(var key in time_obj){
        if(time_obj[key] == 0){
            time_obj[key]='00';
        }
        if(time_obj[key].length == 1){
            time_obj[key]='0'+time_obj[key];
            console.log('here');
        }
    }
    return time_obj;
}
1
0 / 0 / 0
Регистрация: 06.11.2013
Сообщений: 45
17.06.2014, 16:57  [ТС] 7
В виде: "час:мин".В идеале , чтобы двоеточие оставалось, т.е его не надо вводить, а часы и минуты вводятся последовательно.Пример:пользователь набирает на клавиатуре: "2345" в input вводиться- 23:45.
0
82 / 82 / 38
Регистрация: 15.03.2013
Сообщений: 280
17.06.2014, 17:42 8
В виде: "час:мин". В идеале , чтобы двоеточие оставалось, т.е его не надо вводить, а часы и минуты вводятся последовательно.Пример:пользователь набирает на клавиатуре: "2345" в input вводиться- 23:45.
Это не очень хорошая идея. Например, ввод из двух или из трех цифр надо как-то разбирать. Ну, и в принципе ввод типа "115" как-то некрасиво. Можно прикрутить к этим инпутам какой-нибудь timepicker, ну, или если есть время и желание написать его самому.
Или вообще от них отказаться, сделав им
HTML5
1

<input ... disabled="disabled" />
Да, и еще: вот эта часть кода:
Javascript
1
2
3
4
5
6
7

    slide: function(event, ui){
        var time_min, time_max;
            time_min=getTime(ui.values[0]);
            time_max=getTime(ui.values[1])
        jQuery("input#minCost").val(time_min['h']+':'+time_min['m']);
        jQuery("input#maxCost").val(time_max['h']+':'+time_max['m']);
    },
лишняя, достаточно

Javascript
1
2
3
4
5
6
7

    change: function(event, ui){
        var time_min, time_max;
            time_min=getTime(ui.values[0]);
            time_max=getTime(ui.values[1])
        jQuery("input#minCost").val(time_min['h']+':'+time_min['m']);
        jQuery("input#maxCost").val(time_max['h']+':'+time_max['m']);
    }
он обработает и программные изменения значений слайдера (если все-таки оставите инпуты активными)
1
82 / 82 / 38
Регистрация: 15.03.2013
Сообщений: 280
17.06.2014, 18:21 9
Лучший ответ Сообщение было отмечено Programmer_I как решение

Решение

Вот, с первым попавшимся прикрученным timepicker'ом. Разбирайтесь, допиливайте
Вложения
Тип файла: 7z slider.7z (14.6 Кб, 32 просмотров)
1
0 / 0 / 0
Регистрация: 06.11.2013
Сообщений: 45
17.06.2014, 18:42  [ТС] 10
То что надо, спасибо!
0
17.06.2014, 18:42
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 17.06.2014, 18:42
Помогаю со студенческими работами здесь

Ползунок для нескольких изображений
Добрый вечер, подскажите пожалуйста как сделать ползунок для увеличения размера одновременно...

Как сделать такой ползунок?
Начал верстать макет, и наткнулся на этот ползунок. Не знаю как его реализовать. Выручайте)))

Как подключить ползунок к полю для ввода?
Как подключить ползунок к полю для ввода так, чтобы введённое в поле значение отображалось на...

С помощью чего можно сделать дискретный ползунок
Добрый вечер! Подскажите, пожалуйста, с помощью чего можно реализовать ползунок подобного вида?...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru