Плагин анимированного индикатора процесса на jQuery

Сегодня мы будем делать динамический анимированный индикатор процесса (progressbar). Вы, наверное, уже встречались с виджетом индикатора процесса на сайте jQuery UI. По умолчанию, этот виджет поставляется без анимации.

А сегодня мы расширим его возможности и добавим динамики. И в результате получим новый jQuery плагин.

Пример Скачать архив

Ok, скачали исходники, а теперь посмотрим, как они работают!

Шаг 1. HTML

Сначала HTML код.

index.html

<!DOCTYPE html>

<head>

<title>Animated jQuery progressbar | Script tutorials</title>

</head>

<body>

<h3><a href="http://www.script-tutorials.com/animated-jquery-progressbar/">Animated jQuery progressbar | Script Tutorials</a></h3>

</div>

<hr />

</div>

<hr />

</div>

</body>

</html>

Как вы видите, для работы подготовлены 3 индикатора. У каждого индикатора процесса будет свое поведение (на основе индивидуальных свойств).

Обратите внимание на то, как были собраны воедино jQuery библиотеки и стили. Для этого достаточно пройти по ссылке, выбрать ядро UI и единственный виджет – Progressbar, далее скачать результат. На выходе вы получите пакет необходимых библиотек (jquery-1.6.2.min.js + jquery-ui-1.8.16.custom.min.js + jquery-ui-1.8.16.custom.css + зависимые изображения).

Шаг 2. CSS

Наши CSS стили.

css/main.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;}

Шаг 3. JS

На этом шаге мы напишем расширенный плагин для jQuery с новым индикатором процесса.

js/script.js

$(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(); // оставшееся время в MS

var iElapsedMs = new Date() - aOpts.start, // затраченное время в MS

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+' days '+iHours+'h:'+iMin+'m:'+iSec+'s</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('Finished');

}

} ,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});

$('#progress3').anim_progressbar({interval: 1000});

});

В первой части кода вы можете видеть наш новый jQuery плагин — anim_progressbar, во второй части — несколько примеров инициализации с различными параметрами. Для их инициализации мы передаем в конструктор следующие параметры: start (дата начала), finish (дата завершения) и interval (интервал обновления индиактора процесса). Все это универсально...

Выводы

В этом уроке мы показали вам, как просто создавать динамические индикаторы процесса. Мало того, вы сможете создавать различные индикаторы на одной и той же странице, что может быть очень полезным. Удачи вам!

Плагин анимированного индикатора процесса на jQuery

Шаг 1. HTML

index.html

Шаг 2. CSS

css/main.css

Шаг 3. JS

js/script.js

Выводы

Возможно, Вам будет интересно ↓↓↓

3 комментарий на “Плагин анимированного индикатора процесса на jQuery”

Оставить комментарий Отменить ответ