JavaScript-калькулятор с использованием jQuery-слайдера (ползунка)

jquery slider Еще одна заметка про калькуляторы, теперь про использованием давно уже ставших популярными интерактивных элементов управления типа слайдер/slider/ползунок.

Суть удобства и популярности заключается в уменьшении количества забиваемых цифровыми значениями полей, например, количественных характеристик или диапазонов цен.

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

Наш калькулятор будет условно считать стоимость съема комнат отдыха с коэффициентом их типа.
Соответственно два слайдера отвечают за выбор количества комнат, выпадающий список за выбор мультипликатора, т.е. их типа.

У слайдеров есть максимальное и минимальное значение, а также величина шага.
В данном примере min, max — 1-5, 6-10, и шаг в единицу.

Вызов своей функции при движении слайдера

Некоторой особенностью этого примера является вызов нашей кастомной считающей функции calc(); в событии slide. Таким образом при каждом движении слайдера все результаты расчетов будут пересчитываться и обновляться в сводной таблице.

Как поменять внешний вид слайдеров

FireBug-ом легко заметить обилие css-стилей навешанных на элементы слайдера, это означает что править их на свои мы можем простым переопределением с ключевым словом !important;
Так в этом примере уменьшен общий размер элементов слайдера за счет переопределенного стиля:
.ui-widget{font-size: 0.6em !important;}

Примечание: чтобы такой трюк сработал, ваши css-стили должны подгружаться позже родных от jQuery.

Совместимость с браузерами

Тестировалось во всех популярных. Единственный вызвавший ошибку — Internet Explorer:
<strong>Сообщение: Объект не поддерживает это свойство или метод Строка: 46 Символ: 2 Код: 0</strong>Оказалось, что причина в необъявленной переменной summ.

Код скрипта калькулятора

Код калькулятора

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<meta charset="utf-8">
	<style type="text/css">
	div.demo { padding: 10px !important; width: 200px;}
	.ui-widget{font-size: 0.6em !important;}
	</style>
	<script>
	$(function() {
		$( "#slider-range-max" ).slider({
			range: "max",
			min: 1,
			max: 5,
			value: 2,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value );
				calc();
			}
		});
		$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
	});
	$(function() {
		$( "#slider-range-max2" ).slider({
			range: "max",
			min: 6,
			max: 10,
			value: 7,
			slide: function( event, ui ) {
				$( "#amount2" ).val( ui.value );
				calc();
			}
		});
		$( "#amount2" ).val( $( "#slider-range-max2" ).slider( "value" ) );
	});
 
	function calc(par){
	type = document.cl_form.type.value;
	amount = document.cl_form.amount.value;
	amount2 = document.cl_form.amount2.value;
 
	//var summ;
	summ = Number(type) * ( Number(amount) + Number(amount2) );
	document.cl_form.summ.value=summ;
	document.getElementById("typetd").innerHTML=type;
	document.getElementById("amounttd").innerHTML=amount;
	document.getElementById("amount2td").innerHTML=amount2;
	document.getElementById("summ").innerHTML=summ;
	return false; 
	}
	</script>
</head>
<body>
<form name="cl_form">	
<div class="demo">
<p>
	<label for="type">Type of rooms:</label>
	<select name="type" id="type" onchange="calc(this.value);"> 
	<option selected="selected" value="0">Select...</option>
	<option value="1">Luxe (*1)</option>
	<option value="2">Extra (*2)</option>
	<option value="3">Comfort (*3)</option>
	</select>
</p>
<p>
	<label for="amount">Number of rooms, 1st floor:</label>
	<input type="text" id="amount" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; width:11px;" />
</p>
<div id="slider-range-max"></div>
<p>
	<label for="amount2">Number of rooms, 2nd floor:</label>
	<input type="text" id="amount2" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; width:11px;" />
</p>
<div id="slider-range-max2"></div>
<p>
	<label for="summ">The summ:</label>
	<input value="0" name="summ" readonly="readonly" maxlength="10" size="5" type="text">
</p>
<p>
	<table border="1" cellpadding="3" style="border-collapse: collapse;">
		<tr>
			<td>
				type: <p id="typetd">0</p>
			</td>
			<td>
				1st: <p id="amounttd">0</p>
			</td>
			<td>
				2nd: <p id="amount2td">0</p>
			</td>
			<td>
				summ: <p id="summ">0</p>
			</td>
		<tr>
	</table>
</p>
</div>
</form>
</body>
</html>

Пример работы

Пример работы калькулятора на отдельной странице.

Официальная документация

Комментариев: 29

19.05.2011 Ольга:

WMDN

Трюки и приемы веб-разработки на популярных CMS

JavaScript-калькулятор с использованием jQuery-слайдера (ползунка)

Вызов своей функции при движении слайдера

Как поменять внешний вид слайдеров

Совместимость с браузерами

Код скрипта калькулятора

Пример работы

Официальная документация

Смотрите также:

Комментариев: 29

Добавление комментария:

Пригодилось? Поблагодарите рублем! ^_^

Новые записи

Комментарии