Еще одна заметка про калькуляторы, теперь про использованием давно уже ставших популярными интерактивных элементов управления типа слайдер/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.
Еще одна заметка про калькуляторы, теперь про использованием давно уже ставших популярными интерактивных элементов управления типа слайдер/slider/ползунок.
