Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Апрель » 2 » Анимированный ProgressBar JQuery
10:41
Анимированный 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). Довольно универсально, не правда ли? Таким образом, вы можете задать здесь не только разное время, но даже и разные дни (даты)


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


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

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

Статьи
[Прогараммирование]
Как работает CSS?
[Прогараммирование]
ЛЕКЦИЯ. Язык Pascal
[Прогараммирование]
Статический анализ: ошибки в медиаплеере и безглючная аська
[Операционные системы]
Особенности применения технологий Lotus Domino и Notes в современных информационных системах
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Устронение ошибок систем]
Устранение неполадок при возникновении (синего экрана) Blue Screen Of Death (BSOD) (2)
[Прогараммирование]
Строковый тип данных
[Прогараммирование]
Как работает CSS?(часть 2 Шрифты, Текст и Ссылки)
[Прогараммирование]
ДОКУМЕНТИРОВАНИЕ ПРОГРАММ
[Операционные системы]
MAC OS

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2024Конструктор сайтов - uCoz