Приветствую всех! В этот раз речь пойдет…
Приветствую всех! В этот раз речь пойдет о создании калькулятора для расчета взвешенных оценок. Такие оценки часто используют при проведении различных тестирований и сравнений. Например, вы хотите сравнить несколько мобильных телефонов между собой. Выбираете параметры, которые для вас важны (пусть это будут: цена, размер дисплея и вес) и для каждого из них выставляете оценку. Естественно некоторые параметры будут важнее чем другие. Например, цена важнее веса. И вы хотите это учесть.
.jpg)
Для этого используются так называемые взвешенные оценки. Каждому параметру присваивается свой вес, который отражает его важность (чем больше, тем важнее), а затем рассчитывается суммарная оценка. В суммарную оценку входит сумма оценок всех параметров, умноженных на их вес. При этом удобно, чтобы сумма весов всех параметров равнялась 1 (100%). Например, цена – 50%, размер дисплея – 40%, вес – 10%. Теперь рассмотрим пример создания такого калькулятора для 3-х параметров. Нам понадобятся 3 поля для ввода оценок каждого из параметров и 3 слайдера (slider) для задания их весов. В данном случае слайдеры создадут очень наглядное представление весов параметров. К тому же мы сделаем их связанными между собой и пользователю не придется следить за тем, чтобы сумма их значений была равна 100%. Чтобы показать как будет выглядеть окончательный результат, я сделал демонстрационную страничку. Кроме того, вы можете скачать архив с исходниками этого примера и запустить его локально. Сразу хочу обратить ваше внимание на чекбоксы (checkbox) справа от слайдеров. Они служат для того, чтобы заблокировать изменение соответствующего слайдера. Т. к. слайдеров у нас три, то при перемещении одного из них, будут изменяться значения остальных. Поэтому принцип работы следующий. Выставляете нужное значение для первого слайдера, блокируете его, выставляете значения остальных слайдеров, вводите оценки и сразу видите результат.
Структура и принцип работы калькулятора Наше приложение состоит из одной HTML страницы, трёх JavaScript файлов (из них два – это библиотеки jQuery и jQuery UI) и 2-х файлов с CSS стилями. Начнём со страницы – index. html.
<?xml version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www. w3.org/TR/xhtml1/DTD/xhtml1-strict. dtd”> <html xmlns=”http://www. w3.org/1999/xhtml” xml:lang=”en” lang=”en”> <head> <title>Каклькулятор, взвешенные оценки</title> <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ /> <meta http-equiv=”Content-Style-Type” content=”text/css” /> <meta name=”description” content=”Использование ползунков (slider) для создания калькулятора” /> <meta name=”keywords” content=”калькулятор, ползунки, slider, взвешенная оценка” /> <link rel=”stylesheet” type=”text/css” href=”css/ui-lightness/jquery-ui-1.7.2.custom. css” media=”all” /> <link rel=”stylesheet” type=”text/css” href=”styles. css” media=”all” /> </head> <body> <div id=”parameter_1″ class=”calc_row”> <input type=”text” name=”val_1″ id=”val_1″ class=”val_field” value=”0″ /> <div id=”weight_1″ class=”slider”></div> <div id=”sv_1″ class=”slider_val”></div> <input type=”checkbox” class=”sl_enable” /> </div> <div id=”parameter_2″ class=”calc_row”> <input type=”text” name=”val_2″ id=”val_2″ class=”val_field” value=”0″ /> <div id=”weight_2″ class=”slider”></div> <div id=”sv_2″ class=”slider_val”></div> <input type=”checkbox” class=”sl_enable” /> </div> <div id=”parameter_3″ class=”calc_row”> <input type=”text” name=”val_3″ id=”val_3″ class=”val_field” value=”0″ /> <div id=”weight_3″ class=”slider”></div> <div id=”sv_3″ class=”slider_val”></div> <input type=”checkbox” class=”sl_enable” /> </div> <div id=”results”></div> <script type=”text/javascript” src=”js/jquery-1.3.2.min. js”></script> <script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom. min. js”></script> <script type=”text/javascript” src=”js/main. js”></script> </body> </html> * This source code was highlighted with Source Code Highlighter.
В заголовке страницы мы подключили CSS файлы (строки 15 и 16). Первый распространяется вместе с jQuery UI и используется для оформления слайдеров, второй – используется для оформления страницы. Сама страница содержит три практически одинаковых блока. В каждый из них входят: – текстовое поле – задаёт оценку параметра; – слайдер – указывает вес параметра; – текстовая надпись – отображает текущее значение слайдера; – чекбокс (checkbox) – используется для включения/отключения слайдера. За ними расположен блок, показывающий суммарную оценку (строка 42) В конце страницы мы подключаем JavaScript файлы (строки 44-46). Сначала библиотека jQuery, затем jQuery UI и файл с нашими скриптами (main. js). Теперь рассмотрим наш main. js. Это самая сложная и объёмная часть калькулятора. Но большая часть кода касается настройки взаимной работы слайдеров и чекбоксов.
$(function() { /* создаем слайдеры */ $(“.slider”).slider(); /* устанавливаем начальные значения */ $(“.sl_enable”).attr(‘checked’, false); $(“.slider”).each(function() { $(this).slider(‘option’, ‘value’, 33.3); }); $(“.slider_val”).html(“33.3 %”); $(‘.val_field’).val(‘0′); calculate(); /* минимальное и максимальное значение активных слайдеров */ var min = 0; var max = 100; /* Устанавливаем обработчики чекбоксов. Использовать событие change не получается, т. к. в IE оно возникает после того как checkbox теряет фокус (т. е. после переключения checkbox’а нужно кликнуть где-нибудь на странице, чтобы возникло событие change) */ $(“.sl_enable”).click(function() { var curId = getCurId(this); var curSlider = $(‘#weight_’ + curId); if (this. checked) { curSlider. slider(‘disable’); $(“#sv_” + curId).addClass(‘gray’); } else { curSlider. slider(‘enable’); $(“#sv_” + curId).removeClass(‘gray’); } setMinMax(); }); /* обработчик событий slide слайдеров (возникает при перемещении слайдера) */ $(“.slider”).bind(’slide’, function(event, ui) { //блокируем перемещение слайдера если оно выходит за допустимые пределы if ((ui. value > max) || (ui. value < min)) { return false; } updateSliders(this, ui. value); updateLabels(); calculate(); }) .bind(’slidestop’, function() { /* Этот обработчик вызывается после перемещения слайдера. Нужен для того, чтобы обновить значение текущего слайдера (событие slide возникает раньше) */ calculate(); updateLabels(); }); /* Эта функция возвращает id текущего слайдера */ function getCurId(elem) { var parentId = $(elem).parent().attr(‘id’); return parentId. substring(10); } /* Эта функция устанавливает минимально и максимально допустимые значения слайдеров. */ function setMinMax() { var enabledSliders = $(“.slider[aria-disabled!=true]“); var disabledSliders = $(“.slider[aria-disabled=true]“); // определяем сумму значений, установленных на отключенных слайдерах var total = 0; disabledSliders. each(function() { total += $(this).slider(‘option’, ‘value’); }); // задаём минимальные и максимальные значения для включенных слайдер