Интересный прогресс-бар

В данном обзоре я хочу показать как можно расширить возможности компонента Progressbar плагина jQuery UI. Для начала поставим перед собой задачи, которые мы и будем решать:

• прогресс-бар должен быть динамическим, т.е. «бежать вперед» (заполняться) с течением времени
• возможность задавать параметры «бега» бара
• удобство визуального использования. К примеру отображение текущего процента заполнения прогресс-бара

Остановимся подробнее на параметрах «бега». Бар можно параметризовать различными образами: задавая время запуска, шаг и период; время финиша, шаг и период; время старта, время финиша и шаг. Я остановился на последнем, т.е. для инициализации нашего прогресс-бара достаточно указать время старта, время финиша и шаг.

Время старта и финиша будем описывать при помощи объекта Date(year, month, date[, hours, minutes, seconds, ms]). Шаг будем задавать числовой переменной в миллисекундах.

Приступим к реализации

Для начала подключим библиотеку jQuery и её плагин jQuery UI, а также их стили.

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script> 
<link href="jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css"/>  

Здесь всё вообщем то очевидно. Если не понятно — спрашивайте в комментах ;-)

Далее описываем div-элемент, который и будет являться скролл-баром:

<div id="progressbar"></div>

Далее пишем плагин на jQuery

jQuery.fn.progress = function (options){
    var defaults = {
        start: new Date(),
	finish: new Date().setTime(new Date().getTime()+60000),
	interval: 123
    }

    var opts = jQuery.extend(defaults, options), t = this;

    return this.each(function(){
	var allMs = opts.finish - opts.start
	, plus = opts.interval/allMs*100
        , devInterval;

	$(t)
		.progressbar()
		.before('<div id="progresspercent"></div>')
		.after('<div id="progresstext"></div>');

	devInterval = setInterval(function(){
	    var ms = opts.finish - new Date()
	    , wasMs = new Date() - opts.start
	    , days = parseInt(ms/86400000)
	    , hours = parseInt((ms - (days*86400000))/3600000)
	    , min = parseInt((ms - (days*86400000) - (hours*3600000))/60000)
	    , sec = parseInt((ms - (days*86400000) - (min*60000)- (hours*3600000))/1000)
	    , msec = parseInt(ms - (days*86400000) - (sec*1000) - (min*60000)- (hours*3600000))
	    , percent = wasMs/allMs*100;

	    if(percent >= 100){
		percent = 100;
	    }

	    var vHours = hours > 9     ? hours : "0" + hours,
	          vMin   = min   > 9     ? min   : "0" + min,
	          vSec   = sec   > 9     ? sec   : "0" + sec,
	          vMsec  = msec  >= 100  ? msec  : "0" + msec,
	          vMsec  = msec  > 10    ? vMsec  : "0" + vMsec;

	    $("#progresspercent").html("<b>"+percent.toFixed(4)+"%</b>");
	    $("#progresstext").html("До завершения осталось <b>~ "+days+" дн. "+vHours+":"+vMin+":"+vSec+"."+vMsec+" мс</b>");
	    $(t).children(".ui-progressbar-value").css("width", percent+"%");

	    if(percent >= 100){
	        clearInterval(devInterval);
	        $("#progresstext").html("Отсчет завершен");
            }
        }
        ,opts.interval);

	});
}

И наконец привязываем плагин к элементу progressbar:

$("#progressbar").progress();  

По умолчанию время старта (start) — текущее время, время финиша (finish) — через 60 секунд, интервал (interval) — 123 мс.

Изменить любой из этих параметров (или их все) можно таким вот образом:

    $("#progressbar").progress({start: new Date(2000, 0, 1), finish: new Date(2012, 0, 1), interval: 100});

В данном случае старт 1 января 2000, финиш — 1 января 2012, интервал — 100 мс.

Опишем таблицу стилей, благодаря которой наш прогресс-бар приобретет законченный вид, дополнительно задав активную область анимированным изображением:

<style>
    #progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif);display: block!important}
    #progresspercent {position:relative;left:230px;top:20px;}
    .ui-progressbar {height:20px;width:550px;text-align:center}
</style>

Теперь наш прогресс-бар приобретет окончательный вид:

А вот и весь код страницы с прогресс-баром

<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	jQuery.fn.progress = function (options){
        var defaults = {
        	start: new Date(),
			finish: new Date().setTime(new Date().getTime()[phone]),
			interval: 123
		}

		var opts = jQuery.extend(defaults, options), t = this;

		return this.each(function(){
			var allMs = opts.finish - opts.start
				, plus = opts.interval/allMs*100
				, devInterval;

			$(t)
				.progressbar()
				.before('<div id="progresspercent"></div>')
				.after('<div id="progresstext"></div>');

			devInterval = setInterval(function(){
				var ms = opts.finish - new Date()
				, wasMs = new Date() - opts.start
				, days = parseInt(ms/86400000)
				, hours = parseInt((ms - (days*86400000))/3600000)
				, min = parseInt((ms - (days*86400000) - (hours*3600000))/60000)
				, sec = parseInt((ms - (days*86400000) - (min*60000)- (hours*3600000))/1000)
				, msec = parseInt(ms - (days*86400000) - (sec*1000) - (min*60000)- (hours*3600000))
				, percent = wasMs/allMs*100;

			    if(percent >= 100){
					percent = 100;
			    }

			    var vHours = hours > 9     ? hours : "0" + hours,
			          vMin   = min   > 9     ? min   : "0" + min,
			          vSec   = sec   > 9     ? sec   : "0" + sec,
			          vMsec  = msec  >= 100  ? msec  : "0" + msec,
			          vMsec  = msec  > 10    ? vMsec  : "0" + vMsec;

			    $("#progresspercent").html("<b>"+percent.toFixed(4)+"%</b>");
			    $("#progresstext").html("До завершения осталось <b>~ "+days+" дн. "+vHours+":"+vMin+":"+vSec+"."+vMsec+" мс</b>");
			    $(t).children(".ui-progressbar-value").css("width", percent+"%");

				if(percent >= 100){
			        clearInterval(devInterval);
					$("#progresstext").html("Отсчет завершен");
			    }

			}
			,opts.interval);
		});
	}

       $("#progressbar").progress();  
});


$('head').append('<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.14.custom.css" />');

</script>

<style>
    #progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif);display:block!important}
    #progresspercent {position:relative;left:240px;top:20px;}
    .ui-progressbar {height:20px!important;width:550px!important;text-align:center}
	body{overflow:hidden;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=cp1251"/>
</head>
<body>
    <div id="progressbar"></div>
	<br><br>
	<a href="progressbar.zip">Скачать архивом</a>
</body>
</html>

Как это выглядит в действии

Можно увидеть тут