В данном уроке мы создадим динамический анимированный индикатор прогресса на jQuery. Наверняка вам знаком виджет jQuery Progressbar. По умолчанию - это статический виджет без какой-либо анимации. Мы расширим его возможности и сделаем его динамическим. Результат нашего урока будет оформлен в виде плагина jQuery.
Разметка HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>Анимированный индикатор прогресса на jQuery | Материалы проекта RUSELLER.COM</title>
</head>
<body>
<div class="example">
<div id="progress1">
<div class="percent"></div>
<div class="pbar"></div>
<div class="elapsed"></div>
</div>
<hr />
<div id="progress2">
<div class="percent"></div>
<div class="pbar"></div>
<div class="elapsed"></div>
</div>
<hr />
<div id="progress3">
<div class="percent"></div>
<div class="pbar"></div>
<div class="elapsed"></div>
</div>
</div>
</body>
</html>
Для демонстрации приготовлено 3 индикатора прогресса. Каждый индикатор имеет свой набор опций.
Обратите внимание на библиотеки jQuery и стили. Как их подготовить? Очень просто. Переходим на страницу jQuery UI, выбираем UI Core и единственный виджет – Progressbar, затем нажимаем Download. В полученном пакете будет содержаться весь необходимый набор (jquery-1.6.2.min.js + jquery-ui-1.8.16.custom.min.js + jquery-ui-1.8.16.custom.css + изображения).
CSS
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:650px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}
h3 {text-align:center}
.pbar .ui-progressbar-value {display:block !important}
.pbar {overflow: hidden}
.percent {position:relative;text-align: right;}
.elapsed {position:relative;text-align: right;}
JavaScript
$(document).ready(function(){
jQuery.fn.anim_progressbar = function (aOptions) {
// Определяем значения
var iCms = 1000;
var iMms = 60 * iCms;
var iHms = 3600 * iCms;
var iDms = 24 * 3600 * iCms;
// Определяем опции
var aDefOpts = {
start: new Date(), // Текущее время
finish: new Date().setTime(new Date().getTime() + 60 * iCms), // Текущее время + 60 сек
interval: 100
}
var aOpts = jQuery.extend(aDefOpts, aOptions);
var vPb = this;
// Каждый индикатор прогресса
return this.each(
function() {
var iDuration = aOpts.finish - aOpts.start;
// Вызываем оригинальный индикатор прогресса
$(vPb).children('.pbar').progressbar();
// Процесс обработки
var vInterval = setInterval(
function(){
var iLeftMs = aOpts.finish - new Date(); // Оставшееся время в миллисекундах
var iElapsedMs = new Date() - aOpts.start, // Прошедшее время в миллисекундах
iDays = parseInt(iLeftMs / iDms), // Прошло дней
iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // Прошло часов
iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // Прошло минут
iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // Прошло секунд
iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // Процент выполнения
// Выводим текущее положение и прогресс
$(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>');
$(vPb).children('.elapsed').html(iDays+' дн. '+iHours+'ч.:'+iMin+'мин.:'+iSec+'сек.</b>');
$(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');
// В случае завершения
if (iPerc >= 100) {
clearInterval(vInterval);
$(vPb).children('.percent').html('<b>100%</b>');
$(vPb).children('.elapsed').html('Завершено');
}
} ,aOpts.interval
);
}
);
}
// Режим по умолчанию
$('#progress1').anim_progressbar();
// Для секунд с 5-й по 15-ю
var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // Теперь прибавляем по 5 секунд
var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // Теперь прибавляем по 15 секунд
$('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100});
// Устанавливаем интервал обновления в 1 секунду
$('#progress3').anim_progressbar({interval: 1000});
});
В первой части кода мы создаем новый плагин jQuery anim_progressbar, а во второй - приводим несколько примеров инициализации с различными параметрами. Конструктору передаются следующие параметры: start (время старта), finish (время финиша) и interval (интервал обновления индикатора). Так что вы можете устанавливать не только часы и минуты, но и дни.