ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jquery UI slider, не могу разобраться с взаимодействием двух слайдеров
2 сообщений из 2, страница 1 из 1
jquery UI slider, не могу разобраться с взаимодействием двух слайдеров
    #37926733
Andronov4
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Andronov4
Гость
Здравствуйте. используя jquery UI slider, пытаюсь смастерить калькулятор. В настоящий момент имею простую версию с 2мя слайдерами. Слайдерами можно выбирать некую сумму, в результате сумма с двух слайдеров суммируется и выдается на экран.

У каждого из слайдеров есть минимальное и максимальное значение.
Например, минимальное значение первого слайдера может быть 500000, а максимальное 2500000. Минимальное значение второго слайдера может быть 0, максимальное 2500000. Задача: Как сделать так, что бы максимальное значение второго сладера зависило от выбранного значения первого ? Например, если значение первого слайдера выставлено больше 1000000, то максимальное значение второго слайдера становилось бы не 2500000, а 3000000, и конечно при уменьшении значения (меньше 1000000 на первом слайдере) становилось снова 2500000. И возможно ли это ?

Спасибо!

Листинг:

Код: html
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
		<title>Calc</title>

    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	
    	<link rel="stylesheet" type="text/css" href="index_files/jquery-ui-1.css">
		<style type="text/css">
    		#calculator{
    			margin-left:20px; 
    			width: 240px;
    		}
    		#calculator h1{
    			font-family:Arial, Helvetica, sans-serif;
    			font-size: 18px;
    		}
    		#calculator h2{
    			padding:6px;
    			font-family:Arial, Helvetica, sans-serif;
    			font-size: 12px;
    			border:1px solid orange;
    			border-radius:4px;
    		}
    		.ui-slider{
    			height: 6px;
    		}
    		.ui-slider-range{
    			background: orange;
    		}
    		.ui-slider-handle{
    			height: 12px !important;
    			width: 12px !important;
    		} 
    		
    		#summary{
    			position: relative;
    			clear: both;
    		}
    		
   		</style>    
   		
   		<script type="text/javascript" src="index_files/jquery-1.js"></script>
		<script type="text/javascript" src="index_files/jquery-ui-1.js"></script>
		<script type="text/javascript" src="index_files/jquery.js"></script>
						
   		<script type="text/javascript">
		//<![CDATA[
		$(init);
		function init(){
			$("#carprice-slider").slider({
										  range: "min",
        							      value: 1300000,
        							      min: 500000,
        								  max: 2500000,
        								  step:50000,
        								  slide: function( event, ui ) {
        								  				S = ui.value;
														$("#carprice h2").html('Стоимость автомобиля: ' + $.format.number(S,'#,###,###') + ' руб');
														$(summ(S,f));
										  				}
        								 });
        	$("#income-slider").slider({
										  range: "min",
        							      value: 500000,
        							      min: 0,
        								  max: 2500000,
        								  step:50000,
        								  slide: function( event, ui ) {
        								  				f = ui.value;
														$("#income h2").html('Первоначальный взнос: ' + $.format.number(f,'#,###,###') + ' руб');
														$(summ(S,f));
										  				}
        								 });
        					 
        	var S = $("#carprice-slider").slider('value');
        	var f =	$("#income-slider").slider('value');
        	
        	
        	$(summ(S,f));
        	
	}
		function summ(S,f){
			var A;
	
			A = parseInt(Math.round(S + f));
			$("#summary h2").html('Ежемесячный платеж: ' + $.format.number(A,"#,###,###") + ' руб');
		}
		//]]>
		</script>
	</head>
	
	<body>
		<div id="calculator">
		<h1>Кредитный калькулятор</h1>
		<div id="carprice">
		<h2>Стоимость автомобиля: 1,300,000 руб</h2>
			<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="carprice-slider">
			<div style="width: 40%;" class="ui-slider-range ui-widget-header ui-slider-range-min"></div><a style="left: 40%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
		</div>
		<div id="income">
		<h2>Первоначальный взнос: 500,000 руб</h2>
			<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="income-slider">
			<div style="width: 20%;" class="ui-slider-range ui-widget-header ui-slider-range-min"></div><a style="left: 20%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>	
		</div>

		<div id="summary">
		<h2>Ежемесячный платеж: 20,290 руб</h2>
	
		</div>
		
	
		
		
		</div>
	
</body></html>
...
Рейтинг: 0 / 0
22.08.2012, 16:49:27
| Ответить | Цитировать | Написать  
jquery UI slider, не могу разобраться с взаимодействием двух слайдеров
    #37926742
Andronov4
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Andronov4
Гость
http://disk.tom.ru/lkg6mjn
Тут можно скачать полностью исходники
...
Рейтинг: 0 / 0
22.08.2012, 16:53:56
| Ответить | Цитировать | Написать  
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jquery UI slider, не могу разобраться с взаимодействием двух слайдеров
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/search_topic.php?author=Kim+Alexander&author_mode=last_posts&do_search=1]:
 0ms
get settings:
 6ms
get forum list:
 19ms
get settings:
 10ms
get forum list:
 18ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 85ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 38ms
get tp. blocked users:
 2ms
others: 886ms
total:  1086ms
созд. / загр.: 1086ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]