Для пользователей, которые регистрируются. Если Вам не приходит письмо с подтверждением email, пишите на admin[at]quizful[dot]net - будем подтверждать вручную. Просим прощения за доставленные неудобства.

С уважением,
команда Quizful

Знаете ли Вы, что

В разделе "Статьи" можно найти обучающие статьи по информационным технологиям, а также узнать о новостях сервиса Quizful.

← →

Топ контрибуторов

← →

Лента обновлений

ссылка 18:56:00

Комментарий от vasilchenko:
Это не трудно, но мало кто мыслит в отличной от деся...

ссылка 18:28:37

Добавлен вопрос в тест Java - Основы

ссылка 18:14:25

Комментарий от asker:
молоток, возьми с полки пирожок.

ссылка 17:36:28

Комментарий от alex_skn:
korniltsev, Вы правы. Ответ к задаче исправил, спасибо ...

ссылка 17:26:36

Комментарий от Petr0:
Аналогично

Статистика

Тестов: 130, вопросов: 5785. Пройдено: 113087 / 461675.

Создание Progress Bar на JavaScript

Информация о статье

категория Веб технологии
дата	17.07.2009
автор	uprinter
голосов	17

[Disclaimer: Данная статья была переведена в рамках "Конкурса на лучший перевод статьи" на сервисе Quizful. Ссылка на оригинал находится внизу страницы.]

Введение

Progress Bar¹ - один из последних и главных компонентов, включенных в замечательную библиотеку визуальных компонентов пользовательского интерфейса jQuery UI. Он был введен в последней версии библиотеки (на момент написания статьи это версия 1.7).

Автор: Ден Вельман
Ден Вельман пишет статьи по веб-дизайну и программированию на скриптовых языках вот уже около 5 лет. Его первая книга Learning the Yahoo! User Interface Library («Изучаем библиотеку пользовательских инерфейсов Yahoo!») была издана в начале 2008 года. Вторая книга, jQuery UI 1.6: The User Interface library for jQuery («jQuery UI 1.6: библиотека пользовательских интерфейсов для jQuery»), увидела свет ровно через год, в начале 2009 года. Ден живет с женой и тремя детьми в своем родном городе на южном побережье Англии. Днем его скромная натура работает в небольшом, но весьма успешном, агентстве, связанном с электронной коммерцией. Но зато ночью он начинает бороться с темными силами и сражаться за правду, справедливость, и ненавязчивый JavaScript.

Progress Bar имеет определенные границы. Это означает, что при обновлении мы должны задать ему четкое значение. Также мы должны заранее знать, когда будет завершен процесс, обновляющий наш Progress Bar. Progress Bar лучший не выбирать для индикации процессов, которые неизвестно когда закончатся. Это очень простой компонент, с небольшим API, который раскрывает небольшое число свойств и методов. Однако он может быть весьма эффективен и прекрасно подходит, чтобы показать вашим посетителям, какая часть процесса (в процентах или относительных долях) осталась до его завершения.

Поехали!

Для начала нужно раздобыть копию текущей версии jQuery UI. В этом нам поможет «мастер загрузки», расположенный по адресе: http://jqueryui.com/download. Скачанный архив необходимо распаковать так, чтобы он сохранил свою структуру директорий. Затем нам нужно создать новую папку с названием «jQuery UI» и уже внутри нее новый каталог «jqueryui1.7». Скачанный архив должен быть распакован в каталог «jqueryui1.7».

Архив будет содержать все, что нам нужно для начала работы: минимизированные и полные версии всех файлов библиотеки, файлы тем (визуальных стилей) и даже последнюю версию базовой библиотеки jQuery.

Progress Bar состоит из ряда файлов, разделенных в соответствии с их функциями. Ниже представлен список файлов в том порядке, в каком они должны быть включены в вашу страницу:

ui.core.css
ui.theme.css
ui.progressbar.css
jquery[currentversion].js
ui.core.js
ui.progressbar.js

Первые три файла являются частью большого CSS каркаса и используются для определения внешнего вида Progress Bar. В реальной работе вам совершенно нет необходимости использовать именно этот дизайн. Существует множество вариантов настройки, включая огромное количество заранее сконфигурированных тем, доступных непосредственно из Themeroller'а², а также тем, которые вы сами можете создать, используя Themeroller. Можно даже определить свои собственные темы, переписав правила, определенные в таблице стилей по умолчанию. Однако в данном руководстве мы ничего этого делать не будет, а просто используем некоторые из классов, предлагаемых каркасом.

Основная страница

Progress Bar требует совсем немного кода. Все, что нам нужно в дополнение к описанным выше ресурсам, это простой контейнерный элемент. Создайте в вашем текстовом редакторе страничку со следующим кодом, содержащую необходимые включения и контейнерный элемент:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.core.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.theme.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.progressbar.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Progress Bar</title>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript" src="jqueryui1.7/development-bundle/res/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.core.js"></script>
    <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.progressbar.js"></script>
    <script type="text/javascript">
	
    </script>
  </body>
</html>

Сохраните страницу под именем progressBar.html в корне вашей директории jQuery UI. Обратите внимание, мы поместили таблицы стилей в начале файла, а скрипты в конце. Это сделано по причине того, что страницы загружают свой контент быстрее, если они не пытаются в тоже самое время загружать скрипты. Это хорошая практика, которой следует придерживаться.

В конце страницы мы оставили пустой тег <script>. Давайте добавим в него такой код:


$(function() {
  //call progress bar constructor			
  $("#container").progressbar();
});

Все что нам нужно сделать, чтобы запустить Progress Bar по умолчанию, это вызвать его конструктор (метод progressbar) на контейнерном элементе, внутри которого должен быть отрисован наш компонент. Когда вы откроете страницу в браузере, вы увидите, что Progress Bar создался и автоматически заполнил всю ширину контейнера (в данном случае — тела страницы):

Задаем значение Progress Bar

По умолчанию значение³ Progress Bar устанавливается в ноль. Именно поэтому на предыдущем рисунке мы видим лишь пустую рамку. Чтобы заполнить Progress Bar, мы должны задать для него свойство value. Давайте изменим конструктор, чтобы он выглядел следующим образом:


//call progress bar constructor
$("#container").progressbar({ value: 50 });

Свойство value определяет процент области Progress Bar, который будет заполнен, показывая тем самым посетителю, какая часть задачи выполнена, и сколько осталось до завершения. Теперь наш Progress Bar заполнен наполовину:

Получаем значение Progress Bar

Получить текущее значение компонента также просто, как его установить. Чтобы вернуть значение свойства value, мы можем использовать один из методов. После инициализации конструктора, добавьте следующий код:


$("#container").mouseover(function() {
				
  //display the current value
  $("").attr("id", "percentage").text($("#container").progressbar("option", "value") + "% complete").appendTo("body");					
});
				
//set mouseout for progress bar
$("#container").mouseout(function() {
				  
  //hide value
  $("#percentage").remove();
});

Мы добавили две простые анонимные функции, которые вызываются на события mouseover и mouseout контейнера. Обратите внимание, что это стандартные события DOM, не связанные с Progress Bar). Все, что мы делаем в первой функции, это создаем новый абзац, содержащий текущее значение Progress Bar в своем свойстве innerText, и добавляем его к странице. Значение Progress Bar извлекается с помощью специального метода. Аргумент, передаваемый методу, является именем свойства, значение которого мы хотим получить. Вторая функция просто стирает сообщение. Посмотрим на картинку:

Свойства, события и методы

Свойство value теперь единственное настраиваемое свойство Progress Bar. В этом примере вы устанавливали его в момент, когда компонент инициализировался, передавая ему конфигурационный объект. Чтобы задать свойство value после создания Progress Bar, мы применим метод option. Для использования этого метода в качестве «установщика», нужно передать ему в качестве второго параметра новое значение, вот так:

progressbar("option", "value", 75)

Вы, вероятно, удивились, когда я сказал «в качестве второго параметра», когда ясно видно, что у конструктора progressbar три аргумента. Дело в том, что когда мы хотим использовать метод option, мы не вызываем его напрямую. Вместо этого, мы снова вызываем конструктор, но говорим ему, что хотели бы вызвать метод option. Компонент вызовет метод внутри себя, передав ему два параметра (“value” и 75), которые мы передаем конструктору после имени метода.

Progress Bar предоставляет всего одно событие. Это событие change. Оно дает нам возможность отреагировать на изменение значения Progress Bar. Это настраиваемое событие, которое можно ловить и обрабатывать двумя разными способами. Мы можем определить анонимную функцию в качестве значения свойства change в конфигурационном объекте, также как мы это делали со свойством value, либо использовать метод bind библиотеки jQuery, чтобы задать анонимную функцию, которая будет выполнена при наступлении события change. Различие между этими двумя способами состоит в том, что код, определенный с помощью метода bind, будет выполнен в первую очередь.

API Progress Bar предоставляет 5 методов:

destroy
disable
enable
option
value

Все эти методы используются точно так же, как уже рассмотренный нами метод option. Мы просто вызываем конструктор, задавая имя метода и параметры, которые хотим передать. Большинство этих методов вполне очевидны, их названия говорят сами за себя.

Использование Progress Bar

Для начала очень простой пример для тех, кто никогда ранее не использовал jQuery UI. Давайте вернемся немного назад и соберем воедино все, что нужно для успешной реализации. Пример будет примитивным, но он даст вам множество идей относительно того, как можно заставить компонент работать на себя.

Окончательный вариант нашей страницы будет выглядеть так:

Создайте в вашем текстовом редакторе новую страницу со следующим кодом:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.core.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.theme.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.progressbar.css">
    <link rel="stylesheet" type="text/css" href="regForm.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Progress Bar</title>
  </head>
  <body>
    <div class="form-container ui-helper-clearfix ui-corner-all">
      <h1>Registration Form</h1>
      <p>Progress:</p>
      <div id="progress"></div><label id="amount">0%</label>
        <form action="serverScript.php">
          <div id="panel1" class="form-panel">
            <h2>Personal Details</h2>
              <fieldset class="ui-corner-all">
	<label>Name:</label><input type="text">
	<label>D.O.B:</label><input type="text">
	<label>Choose password:</label><input type="password">
	<label>Confirm password:</label><input type="password">
              </fieldset>
            </div>
            <div id="panel2" class="form-panel ui-helper-hidden">
              <h2>Contact Details</h2>
              <fieldset class="ui-corner-all">
                <label>Email:</label><input type="text">
	<label>Telephone:</label><input type="text">
	<label>Address:</label><textarea rows="3" cols="25"></textarea>
              </fieldset>
            </div>
            <div id="thanks" class="form-panel ui-helper-hidden">
              <h2>Registration Complete</h2>
              <fieldset class="ui-corner-all">
  	<p>Thanks for registering!</p>
              </fieldset>
            </div>
            <button id="next">Next ></button><button id="back" disabled="disabled">< Back</button>
          </form>
        </div>
        <script type="text/javascript" src="jqueryui1.7/development-bundle/res/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.core.js"></script>
        <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.progressbar.js"></script>
        <script type="text/javascript">

Сохраните файл под именем regForm.html в папке jQuery UI. В верхней части страницы мы ссылаемся на файлы CSS каркаса. В первую очередь это необходимо, чтобы задать визуальный стиль нашему Progress Bar. Но мы также можем использовать некоторые классы из этого каркаса для своих собственных элементов! Мы также добавим настраиваемую таблицу стилей (ее мы создадим вскоре).

Тело страницы содержит несколько элементов верстки и текстовые узлы. Но главные компоненты это контейнеры для Progress Bar'ов и форма, которая разделена на несколько частей при помощи тегов <div> и элементов <fieldset>. Мы сделали это для того, чтобы иметь возможность скрывать части формы, обеспечив тем самым эффект разбиения на несколько страниц.

Мы также добавили абзац и метку next. Мы их будем позиционировать так, чтобы они появлялись внутри нашего Progress Bar'а. Абзац содержит обыкновенную строку текста. Метка next будет использоваться для отображения текущего значения свойства value.

Внешнему контейнеру присвоены несколько имен класса. Первое используется для того, чтобы мы могли применить к элементу наши собственные стили. Вторые два — чтобы задать различные свойства из CSS каркаса. Класс ui-helper-clearfix используется для автоматической очистки плавающих элементов. Это отличный способ, чтобы сократить число лишних нежелательных блоков <div>.

Класс ui-corner-all class используется для создания у контейнерного элемента закругленных углов с использованием нескольких запатентованных стилевых правил, которые поддерживаются только браузерами, основанными на движках gecko и webkit. Однако в условиях «прогрессивного улучшения» (progressive enhancement) их вполне можно использовать. Стратегия прогрессивного улучшения говорит, что мы должны предложить улучшенный стиль веб-страницы тем браузерам, которые могут его отображать. В данном случае, остальные браузеры просто будут выводить блоки с прямыми углами.

Другой класс из каркаса CSS мы используем внутри формы. Несколько панелей должны быть скрыты при первой загрузке страницы. Поэтому мы можем использовать класс ui-helper-hidden, чтобы убедиться, что их свойство display установлено в none. Когда же мы захотим их показать, единственное что придется сделать, это удалить имя этого класса.

Внизу тела страницы (исключительно по причине быстродействия, работать это будет в любом случае!) мы ссылаемся на нужные JavaScript файлы из библиотеки. Самый последний тег <script> пуст и ожидает код, который воплотит в жизнь форма и Progress Bar.

Давайте добавим следующий код:


$(function() {

  //call progress bar constructor
  $("#progress").progressbar({ change: function() {

    //update amount label when value changes
    $("#amount").text($("#progress").progressbar("option", "value") + "%");
  } });

  //set click handler for next button
  $("#next").click(function(e) {

  //stop form submission
  e.preventDefault();

  //look at each panel
  $(".form-panel").each(function() {

    //if it's not the first panel enable the back button
    ($(this).attr("id") != "panel1") ? null : $("#back").attr("disabled", "");

	//if the panel is visible fade it out
	($(this).hasClass("ui-helper-hidden")) ? null : $(this).fadeOut("fast", function() {

	  //add hidden class and show the next panel
	  $(this).addClass("ui-helper-hidden").next().fadeIn("fast", function() {

	    //if it's the last panel disable the next button
    	    ($(this).attr("id") != "thanks") ? null : $("#next").attr("disabled", "disabled");
								
	    //remove hidden class from new panel
	    $(this).removeClass("ui-helper-hidden");
								
	    //update progress bar
	    $("#progress").progressbar("option", "value", $("#progress").progressbar("option", "value") + 50);
	  });
      });
    });
  });

});

Внутри внешнего блока document.ready у нас есть функция-конструктор для нашего Progress Bar'а. Мы передаем конструктору конфигурационный объект, содержащий единственный параметр. Это параметр change. Он позволяет задать анонимную функцию, которая будет выполняться каждый раз, когда возникает событие change. Мы можем использовать это для обновления текстовой метки, которую мы собираемся поместить в пределы Progress Bar'а.

Каждый раз при возникновении события change мы будет брать текущее значение свойства value нашего Progress Bar'а используя метод option и устанавливать его как текст метки. Отметим, что событие происходит уже после изменения, поэтому значение, которое мы получим, всегда будет новым.

Затем, у нас есть обработчик для кнопки «Дальше». Нажатие этой кнопки приведет к переходу на следующую «страницу» (через эффект затемнения) и изменению значения Progress Bar'а. Также нам нужно сделать еще несколько вещей. Поведение по умолчанию кнопки в форме предполагает отправку этой формы на сервер. На данном этапе нам это не нужно, поэтому первая вещь, которую должен сделать обработчик щелчка на кнопке, это предотвратить отправку формы при помощи JavaScript функции preventDefault. Эта функция вызывается из объекта события, который автоматически передается анонимной функции-обработчику.

Итак, мы прошлись по каждой отдельной панели в форме, чтобы идентифицировать нашу текущую панель. Первое, что нужно сделать, это проверить, не является ли текущая панель первой. Если не является, мы активируем кнопку «Назад», которая по умолчанию заблокирована. В каждый момент времени может быть показана только одна панель, поэтому мы ищем панель, у которой не определен CSS класс ui-helper-hidden и скрываем ее. Мы также определим анонимную функцию обратного вызова, которая будет вызываться всякий раз после скрытия панели.

Внутри второй функции мы выбираем следующий элемент и отображаем его. Если следующий элемент является последним и имеет атрибут id со значением “thanks”, мы блокируем кнопку «Дальше». Хотя в этом примере мы не беспокоимся о реальной работоспособности формы, на данном этапе мы вполне могли бы отправить собранные данные на сервер! Мы удаляем CSS класс ui-helper-hidden и панель снова видна.

В конце мы снова используем метод option, на этот раз в режиме «установщика», чтобы задать новое значение Progress Bar'а. Новое значение, которое мы передаем методу вторым параметром, является просто текущим значением плюс 50, так как наша форма состоит всего из двух частей. Последняя часть будет вызывать функцию, обновляющую метку.

Далее нам нужно добавить очень похожий обработчик клика на кнопке «Назад».


//set click handler for back button
$("#back").click(function(e) {
				  
  //stop form submission
  e.preventDefault();
					
  //look at each panel
  $(".form-panel").each(function() {
					  					
    //if it's not the last panel enable the next button
    ($(this).attr("id") != "thanks") ? null : $("#next").attr("disabled", "");
					  
    //if the panel is visible fade it out
    ($(this).hasClass("ui-helper-hidden")) ? null : $(this).fadeOut("fast", function() {
						  
      //add hidden class and show the next panel
      $(this).addClass("ui-helper-hidden").prev().fadeIn("fast", function() {
							
        //if it's the first panel disable the back button
    	  ($(this).attr("id") != "panel1") ? null : $("#back").attr("disabled", "disabled");
										
	  //remove hidden class from new panel
	  $(this).removeClass("ui-helper-hidden");
								
	  //update progress bar
	  $("#progress").progressbar("option", "value", $("#progress").progressbar("option", "value") - 50);
      });
    });
  });
});

Теперь это весь код, который нам понадобится! Единственное, что осталось сделать, это добавить к нашему примеру некоторые базовые стили CSS. Создайте в вашем редакторе новый файл и добавьте следующий код:


h1, h2 { font-family:Georgia; font-size:140%; margin-top:0; }
h2 { font-size:100%; margin:20px 0 10px; text-align:left; }
.form-container {
  width:400px; margin:0 auto; position:relative; font-family:Verdana;
  font-size:80%; padding:20px; background-color:#e0e3e2;
  border:3px solid #abadac;
}
.form-panel { width:400px; height:241px; }
.form-panel fieldset {
  width:397px; height:170px; margin:0 auto; padding:22px 0 0;
  border:1px solid #abadac; background-color:#ffffff;
}
.form-panel label {
  width:146px; display:block; float:left; text-align:right;
  padding-top:2px; margin-right:10px;
}
.form-panel input, .form-panel textarea {
  float:left; width:200px; margin-bottom:13px;
}
.form-container button { float:right; }
p {
  margin:0; font-size:75%; position:absolute; left:30px; top:60px;
  font-weight:bold;
}
#amount {
  position:absolute; right:30px; top:60px; font-size:80%;
  font-weight:bold;
}
#thanks { text-align:center; }
#thanks p {
  margin-top:48px; font-size:160%; position:relative; left:0; top:0;
}

Сохраните файл под именем regForm.css в одном каталоге с HTML файлами. Теперь у нас должна получиться полностью рабочая страница с подключенным Progress Bar'ом. После открытия страницы вы должны иметь возможность переходить последовательно на каждую панель формы, а Progress Bar должен соответствующим образом обновляться.

Заключение

В этой статье мы познакомились с чрезвычайно полезным компонентов Progress Bar, который вы можете использовать как визуальное средство, чтобы показать посетителям, сколько еще определенный процесс собирается работать до своего завершения. Progress Bar обеспечивает привлекательное и наглядное представление информации, таким образом, чтобы она сразу была понятна вашим посетителям.

Мы рассмотрели свойство и событие, которые предоставляются API, познакомились с некоторыми методами, которые мы можете вызывать для управления Progress Bar'ом. Рассмотренный пример должен без проблем запускаться во всех основных браузерах, хотя он и выглядит немного неаккуратно в старом добром IE (это было бы очень легко исправить, если бы мы пожелали это сделать).

Сноски

Обычно переводится как "индикатор процесса" или "индикатор выполнения"
Themeroller — конфигуратор визуальных стилей для компонентов jQuery, доступный по адресу http://jqueryui.com/themeroller/
Здесь и далее под значением Progress Bar будем понимать значение его единственного свойства — свойства value

Оригинальный текст статьи: Create a Progress Bar With Javascript

Если Вам понравилась статья, проголосуйте за нее

Голосов: 17