Анимированный индикатор прогресса на jQuery

В данном уроке мы создадим динамический анимированный индикатор прогресса на 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 (интервал обновления индикатора). Так что вы можете устанавливать не только часы и минуты, но и дни.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/-bv2n8T7f3E/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Анимированный индикатор прогресса на jQuery | | 2012-06-19 12:03:01 | | Статьи Web-мастеру | | В данном уроке мы создадим динамический анимированный индикатор прогресса на jQuery. Наверняка вам знаком виджет jQuery Progressbar.  По умолчанию - это статический виджет без какой-либо анимации. Мы | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: