Плагин анимированного индикатора процесса на jQuery

Сегодня мы будем делать динамический анимированный индикатор процесса (progressbar). Вы, наверное, уже встречались с виджетом индикатора процесса на сайте jQuery UI. По умолчанию, этот виджет поставляется без анимации.

А сегодня мы расширим его возможности и добавим динамики. И в результате получим новый jQuery плагин.

Пример Скачать архив

Ok, скачали исходники, а теперь посмотрим, как они работают!

Шаг 1. HTML

Сначала HTML код.

index.html

Как вы видите, для работы подготовлены 3 индикатора. У каждого индикатора процесса будет свое поведение (на основе индивидуальных свойств).

Обратите внимание на то, как были собраны воедино jQuery библиотеки и стили. Для этого достаточно пройти по ссылке, выбрать ядро UI и единственный виджет – 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

Шаг 3. JS

На этом шаге мы напишем расширенный плагин для jQuery с новым индикатором процесса.

js/script.js

В первой части кода вы можете видеть наш новый jQuery плагин — anim_progressbar, во второй части — несколько примеров инициализации с различными параметрами. Для их инициализации мы передаем в конструктор следующие параметры: start (дата начала), finish (дата завершения) и interval (интервал обновления индиактора процесса). Все это универсально...

Выводы

В этом уроке мы показали вам, как просто создавать динамические индикаторы процесса. Мало того, вы сможете создавать различные индикаторы на одной и той же странице, что может быть очень полезным. Удачи вам!


3 комментарий на “Плагин анимированного индикатора процесса на jQuery

  1. А как сделать чтобы когда прогресс бар покажет 100% открывалась другая страница?

    • в

      вставьте после

      строку

Оставить комментарий