Анимированный индикатор прогресса на 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
Гораздо больше людей сдавшихся, чем побежденных. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.