Краткое руководство: добавление элементов управления ходом выполнения (HTML)

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

При помощи элементов управления Progress вы можете показать пользователю, что приложение выполняет определенное задание, например скачивает изображения, загружает файлы или обрабатывает данные. Существуют различные стили для элементов управления Progress и разные способы их добавления в приложения среды выполнения Windows на JavaScript.

Предварительные требования

Предполагается, что вы умеете создавать простые приложения среды выполнения Windows на JavaScript. Рекомендации по созданию первого приложения см. в разделе Создание первого приложения среды выполнения Windows на JavaScript. Для получения помощи в создании первых элементов управления и добавлении обработчиков событий см. Краткое руководство: добавление элементов управления и обработчиков событий.

Стили элементов управления ходом выполнения

Существуют три стиля для элементов управления progress, которые используются в трех случаях, — если объем работы известен, если он не известен и если задача является модальной: это определенный стиль индикатора выполнения, неопределенный стиль индикатора выполнения и неопределенный стиль кольцевого индикатора выполнения.

Определенный индикатор выполнения: показывает, какой процент работы выполнен приложением. По мере выполнения работы цветная заливка заполняет полосу индикатора слева направо, пока не заполнит ее полностью. Определенный индикатор выполнения
Неопределенный индикатор выполнения: показывает, что пользователи могут работать с пользовательским интерфейсом, пока приложение выполняет свою задачу. Анимация: точки появляются слева и перемещаются вправо по отрезку индикатора выполнения, пока не достигнут его конца и не исчезнут. Неопределенный индикатор выполнения
Неопределенный кольцевой индикатор выполнения (только для Windows): показывает, что пользователь не может совершать никаких действий до тех пор, пока приложение не завершит выполнение задачи, — то есть что операция является модальной. Анимация: несколько точек перемещаются по кругу по часовой стрелке. Кольцевой индикатор выполнения

 

Добавление определенного индикатора выполнения

Определенный индикатор выполнения показывает, какой процент задания выполнен приложением. По мере выполнения задания полоса индикатора заполняется. Если объем оставшейся работы можно определить в единицах времени, байтах, файлах или любых других исчисляемых единицах, используйте определенный индикатор выполнения. Подробнее о том, когда использовать определенный индикатор выполнения, см. в статье Руководство и контрольный список для элементов управления индикаторов выполнения.

Индикатор выполнения предоставляет 3 свойства для настройки и определения индикации хода выполнения:

Свойство Описание

max

Число, определяющее объем всей работы. Значение по умолчанию — 1,0.

value

Число, определяющее текущий момент выполнения. Если нужно показать ход скачивания файла, то этим значением может быть число скачанных байтов (кроме того, нужно задать для свойства max общее количество байтов в скачиваемых файлах).

position

Только чтение Индикатор хода выполнения текущего процесса, который представляет собой value, деленный на max.

 

Создание определенного индикатора выполнения

Чтобы создать определенный индикатор выполнения, нужно создать элемент хода выполнения и задать для него свойство value. Если вы не хотите использовать значение по умолчанию для законченного задания (1,0), измените его, задав другое значение для свойства max. В этом примере демонстрируется создание определенного индикатора выполнения и устанавливается значение свойства value на 30, а свойства max — на 100. Готовый индикатор выполнения показывает, что задание выполнено на 30 %.

<progress id="determinateProgressBar" value="30" max="100"></progress>

Обновление значения определенного индикатора выполнения

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

Пример обновления значения индикатора выполнения

var progressBar = document.getElementById("determinateProgressBar");
progressBar.value = value;

Добавление неопределенного индикатора выполнения

Если невозможно оценить, какой объем работы осталось выполнить до завершения задачи, но данная операция не мешает взаимодействию пользователя с пользовательским интерфейсом, используйте неопределенный индикатор выполнения. Неопределенный индикатор выполнения отображает не полосу, которая заполняется цветом по мере выполнения, а анимацию в виде точек, перемещающихся слева направо. Подробнее о том, когда использовать неопределенный индикатор выполнения, см. в статье Руководство и контрольный список для элементов управления индикаторов выполнения.

Создание неопределенного индикатора выполнения

Для создания неопределенного индикатора выполнения создайте элемент хода выполнения, не определяя свойства value или max.

<!-- Create an indeterminate progress bar -->
<progress></progress>

Добавление неопределенного кольцевого индикатора выполнения (только для Windows)

Если невозможно оценить, какой объем работы осталось выполнить до завершения задачи, причем при выполнении операции блокируется взаимодействие пользователя с пользовательским интерфейсом, то используйте кольцевой индикатор выполнения. Кольцевой индикатор выполнения отображает анимацию в виде нескольких точек, перемещающихся по кругу. Подробнее о том, когда использовать кольцевой индикатор выполнения, см. в статье Руководство и контрольный список для элементов управления индикаторов выполнения.

Создание кольцевого индикатора выполнения

Для создания кольцевого индикатора выполнения создайте элемент хода выполнения, не определяя свойства value или max, и задайте ему класс win-ring.

<progress class="win-ring"></progress>

(Класс win-ring — это один из стилей, предоставляемых библиотекой Windows для JavaScript.)

В следующем примере демонстрируется создание кольцевого индикатора выполнения "неопределенный" с выводом текста.

<label class="progressRingText">
    <progress class="win-ring withText"></progress>Processing</label>

Стили CSS для предыдущего примера.

progress.withText
{
    color: inherit; /* Uses the same text color as the page */
    vertical-align: text-bottom; /* Makes the bottom of the control align with the bottom of its label */
}

/* Text style for a label for the progress ring */
.progressRingText
{
    font-family: "Segoe UI";
}

/* Text style for a label for a default size progress ring */
.progressRingText
{
    font-size: 11pt;
    line-height: 15pt;
}

/* The margin to separate the ring and its label */
.progressRingText progress
{
    margin-right: 5px;
}

Сводка и следующие действия

Вы научились создавать разные типы элементов управления progress.

В следующем разделе под названием Стилизация элементов управления "Ход выполнения" вы узнаете об использовании CSS и классов библиотеки WinJS для определения стиля элементов управления progress.

В следующем разделе под названием Руководство и контрольный список для элементов управления индикаторов выполнения содержатся подробные сведения о том, когда и как использовать элемент управления progress.

Связанные разделы

progress

Определение стиля элементов управления индикаторов выполнения

Руководство и контрольный список для элементов управления индикаторов выполнения