Горизонтальный индикатор выполнения

Question

В html и jQuery, как вы показываете несколько горизонтальных индикаторов? У меня есть идея для класса. Студенты голосуют по темам, и во время голосования индикаторы выполнения перемещаются влево и вправо. Если вы когда-либо участвовали в опросе по Adobe Connect, я думаю о таком виде.

Это может быть в html5, потому что я буду единственным, кто отображает результаты (в начале класса).

Это не может быть во вспышке, потому что я плохо знаю вспышку.

Я просто буду автоматически обновлять страницу каждые 15 секунд или около того.

Answer 1

Как насчет использования div внутри div?

HTML / CSS:

<div id="progress" style="width:200px; height:5px; border:1px solid black">
    <div style="background:green; height:inherit; width:0%">
    </div>
</div>

jQuery:

$(document.ready(function() {
    window.setInterval(function() {
        $('#progress div').css('width', your_way_of_measuring_percentage + '%');
    }, 15000);
});

Не проверял этот код, поэтомувики сообщества: :)

Answer 2

Конечно, вы искали это и нашли http://jqueryui.com/demos/progressbar/? Какие дополнительные вопросы у вас есть?

Answer 3

Я бы использовал простые вложенные div и установил процентную долю ширины внутреннего цветного div в процентах от того, что вы пытаетесь измерить. Внешний div может иметь границу и фиксированную ширину / высоту. Я бы хотел, чтобы эта базовая функциональность работала первой. Затем вы можете добавить красивый индикатор в качестве улучшения.

Вы можете использовать jQuery, чтобы помочь с кодированием, но в основном это будет упражнение в базовом кодировании JavaScript / HTML. Вы не сможете одновременно (в истинном определении слова) обновлять индикаторы выполнения, потому что JavaScript является однопоточным, но вы можете циклически перемещаться по индикаторам выполнения с использованием некоторого временного интервала сортировки и обновлять% каждого индикатора выполнения, выполненный индивидуально, отражая каждый прогресс человека (или что бы то ни было).

Answer 4

документ: http://docs.jquery.com/UI/Progressbar демо: http://jqueryui.com/demos/progressbar/

$(function() {$("#progressbar").progressbar({value: 37});

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