Уроки Прогресс бар JQuery
19 сентября 2013
2729
прогресс бар, progressbar, jquery, опрос

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

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

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

 

Шаг первый. Подключение библиотеки и скриптов. 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>

 

Шаг второй. HTML.

 

Выводим 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>

 

Шаг третий. CSS.

 

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

 

#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, по сути это тоже самое, но присутствует немного другой функционал. Вот как бы на этом все пожалуй. Всем спасибо за внимание! 





Роман КраутерИсточник материала »