Прогресс бар JQuery

Продолжаем изучать jQueryui и тема нашего сегодняшнего урока прогресс бар JQuery. В прошлых уроках, из этого списка мы подробно изучали, такие тематики как - JQuery слайдер slider, JQuery сортировка sortable и JQuery закладки tabs. Можете также их посмотреть и высказать свое мнение. По сути, progressbar нужен для того, чтобы можно было отслеживать процент загрузки чего либо. Допустим, Вы хотите загрузить файл на сервер, но после того как он начнет грузиться, хотите знать сколько по времени будет занимать этот процесс. Вот для таких именно случаев и нужен прогресс бар JQuery. С понятиями вроде разобрались, теперь рассмотрим код скрипта.

Для начала подключим две библиотеки jquery.js и jquery-ui-1.8.4.custom.min.js.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>

Далее пропишем код, который будет работать и отображать прогресс бар. На данном примере мы рассмотрим варианты с checkbox, Вы же можете использовать любые, просто заменив на нужные к примеру radio. Значение 35% - это оценка деления прогресс бара на соотношение количества checkbox.

Грубо говоря 100% мы делим на 3 и получаем 35%, если округлить в большую сторону. Остальные действия описаны в комментариях в коде.

<script>
$(document).ready(function() {
/*Начинаем чтение функции*/
$("#progressbar").progressbar({
value: 0
});
/*задаем идентификатор прогрессора в положение 0,
пока он не активирован*/
$('#opros :checkbox').change(function()
/*Создаем идентификатор opros, который позже заключим
в div и он будет выполнять цепную роль между checkbox и
progressbar*/
{
var chcheckbox = $('#opros :checkbox:checked').size();
$("#progressbar").progressbar({
value: chcheckbox * 35
});
/*Устанавливаем значение 35 для каждого нажатия на
checkbox с процентным соотношением на 100 при делении
на 3 равных checkbox*/
var questCount = $('#opros div[id*=checkbox]').size();
$('#aswerCount').text('Вы ответили на ' + chcheckbox +
' из ' + questCount + ' вопросов');
});
/*Переменная questCount показываем количество прибавления
прогрессора с соотношением нажатия одного checkbox*/
/*Идентификатор aswerCount отображает прогрессорное деление*/
$('#opros').load(function() {
 var chcheckbox = $('#opros :checkbox:checked').size();
$("#progressbar").progressbar({
value: chcheckbox * 35
});
var questCount = $('#opros div[id*=checkbox]').size();
$('#aswerCount').text('Вы ответили на ' + chcheckbox +
' из ' + questCount + ' вопросов');
});
});
</script>

Выводим checkbox'ы, всего я установил их три, каждому div даем идентификатор равный упорядоченному прибавлению checkbox, то есть checkbox1, checkbox2, checkbox3. Далее выводим подсчет количества отвеченных вопросов и прогресс бар.

<div id="opros">
<div id="checkbox1">
<input type="checkbox"/>
<label>Хочу изучить PHP</label>
</div>
<br>
<div id="checkbox2">
<input type="checkbox"/>
<label>Хочу изучить JavaScript</label>
</div>
<br>
<div id="checkbox3">
<input type="checkbox"/>
<label>Хочу изучить ASP.NET</label>
</div>
<br>
<p id="aswerCount">Всего 3 вопроса</p>
<div id="progressbar"></div>
</div>

Придаем стили прогресс бару, причем все они являются обязательными!  

#aswerCount
{
font-weight: bold;
}

#progressbar
{
margin-top: 20px;
border: 1px solid black;
width: 200px;
position: absolute;
}

.ui-widget-header
{
background: #3d456a;
color: #ffffff;
font-weight: bold;
}

.ui-widget-header a
{
color: #ffffff;
}

.ui-progressbar
{
height:1em;
text-align: left;
}

.ui-progressbar .ui-progressbar-value
{
margin: 0px;
height:100%;
}

Кстати, есть еще один очень похожий скрипт на этот, шкала на JQuery, по сути это тоже самое, но присутствует немного другой функционал. Вот как бы на этом все пожалуй. Всем спасибо за внимание!