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

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



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


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

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


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

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


 

Шаг 1. HTML

Здесь все HTML

index.html

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


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


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

Категория: CSS//HTML//JS | Просмотров: 934 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди