Сегодня мы будем делать динамический анимированный индикатор процесса (progressbar). Вы, наверное, уже встречались с виджетом индикатора процесса на сайте jQuery UI. По умолчанию, этот виджет поставляется без анимации.
А сегодня мы расширим его возможности и добавим динамики. И в результате получим новый jQuery плагин.
Ok, скачали исходники, а теперь посмотрим, как они работают!
Шаг 1. HTML
Сначала HTML код.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="en"> <head> <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>Animated jQuery progressbar | Script tutorials</title> </head> <body> <div class="example"> <h3><a href="http://www.script-tutorials.com/animated-jquery-progressbar/">Animated jQuery progressbar | Script Tutorials</a></h3> <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 библиотеки и стили. Для этого достаточно пройти по ссылке, выбрать ядро 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
1 2 3 4 5 6 7 8 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
$(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
(интервал обновления индиактора процесса). Все это универсально...
Выводы
В этом уроке мы показали вам, как просто создавать динамические индикаторы процесса. Мало того, вы сможете создавать различные индикаторы на одной и той же странице, что может быть очень полезным. Удачи вам!
А как сделать чтобы когда прогресс бар покажет 100% открывалась другая страница?
в
вставьте после
строку
Огромное спасибо)