Анимированный ProgressBar JQuery - 20 Марта 2013 - Блог

Полезное в сети

Всегда в теме

Статистика

Онлайн всего: 3

Гостей: 3

Пользователей: 0

Свежий софт

Wrecker
Kaspersky Internet Security 2015

Wrecker
Virtual DJ

Wrecker
SoundForge 11

Wrecker
Alcohol 120

Wrecker
Norton Internet Security 2014

Iron
Loaris Trojan Remover

Рекомендуем

Главная » 2013 » Март » 20 » Анимированный ProgressBar JQuery

23:06

Анимированный ProgressBar JQuery

Анимированный ProgressBar JQuery

Сегодня мы будем делать динамический анимированный ProgressBar. Я думаю, вы уже знаете, JQuery виджет -Progressbar . По умолчанию - это статическая виджет без анимации. Сегодня мы расширим возможности этого плагина.

ДЕМО СКАЧАТЬ ИСХОДНИК

Шаг 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 progressbars. Каждый ProgressBar будет иметь собственное поведение (с использованием собственных свойств).

Кроме того, обратите внимание на связанные JQuery библиотеки и стили. Как я готовил это? Очень легко, перейти сюда , выберите пользовательский интерфейс основной и один виджет - 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

В этом JS мы будем писать расширение плагина для JQuery с нашим новым ProgressBar.

JS / script.js

$(document).ready(function(){

jQuery.fn.anim_progressbar = function (aOptions) {

// def values

var iCms = 1000;

var iMms = 60 * iCms;

var iHms = 3600 * iCms;

var iDms = 24 * 3600 * iCms;

// def options

var aDefOpts = {

start: new Date(), // now

finish: new Date().setTime(new Date().getTime() + 60 * iCms), // now + 60 sec

interval: 100

}

var aOpts = jQuery.extend(aDefOpts, aOptions);

var vPb = this;

// each progress bar

return this.each(

function() {

var iDuration = aOpts.finish - aOpts.start;

// calling original progressbar

$(vPb).children('.pbar').progressbar();

// looping process

var vInterval = setInterval(

function(){

var iLeftMs = aOpts.finish - new Date(); // left time in MS

var iElapsedMs = new Date() - aOpts.start, // elapsed time in MS

iDays = parseInt(iLeftMs / iDms), // elapsed days

iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // elapsed hours

iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // elapsed minutes

iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // elapsed seconds

iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // percentages

// display current positions and progress

$(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+'%');

// in case of Finish

if (iPerc >= 100) {

clearInterval(vInterval);

$(vPb).children('.percent').html('<b>100%</b>');

$(vPb).children('.elapsed').html('Finished');

}

} ,aOpts.interval

);

}

);

}

// default mode

$('#progress1').anim_progressbar();

// from second #5 till 15

var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // now plus 5 secs

var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // now plus 15 secs

$('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100});

// we will just set interval of updating to 1 sec

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

});

В первой половине вы можете увидеть наш новый плагин jQuery - anim_progressbar, во второй - несколько примеров инициализации с различными параметрами. Мы будем вводить в конструктор следующие параметры: начало (дата начала), окончание (дата окончания) и интервал (интервал обновления ProgressBar). Довольно универсально, не правда ли? Таким образом, вы можете задать здесь не только разное время, но даже и разные дни (даты)

ДЕМО СКАЧАТЬ ИСХОДНИК

Источник урока