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/topic.php?fid=22&msg=37926742&tid=1449436]:
 0ms
get settings:
 6ms
get forum list:
 8ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 190ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 24ms
get tp. blocked users:
 1ms
others: 192ms
total:  435ms
созд. / загр.: 435ms
x
x
Закрыть


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