Barre de progression horizontale

Question

En html et jQuery, comment affichez-vous plusieurs barres de progression horizontales? J'ai une idée pour la classe. Les élèves votent sur des sujets et, au fur et à mesure qu'ils votent, les barres de progression se déplacent à gauche et à droite. Si vous avez déjà participé à un sondage sur Adobe Connect, c'est le genre de look auquel je pense.

Il peut être en html5 car je serai la seule personne à afficher les résultats (en tête de la classe).

Il ne peut pas être en flash car je ne connais pas très bien le flash.

Je vais juste avoir l'actualisation automatique de la page toutes les 15 secondes environ.

Answer 1

Sûrement vous avez cherché pour cela et trouvé http://jqueryui.com/demos/progressbar/? Quelles questions supplémentaires avez-vous?

Answer 2

doc: http://docs.jquery.com/UI/Progressbar demo: http://jqueryui.com/demos/progressbar/

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

Il suffit de créer plusieurs éléments si vous avez besoin de plusieurs barres de progression

Answer 3

J'utiliser divs imbriqués simples et définir le pourcentage de largeur de la div intérieure, de couleur à le pourcentage de tout ce que vous essayez de mesurer. La div externe pourrait avoir une bordure et une largeur/hauteur fixe. Je voudrais que cette fonctionnalité de base fonctionne en premier. Vous pouvez ensuite ajouter une belle barre de progression en tant qu'amélioration.

Vous pouvez utiliser jQuery pour coder ceci, mais il s'agirait principalement d'un exercice de codage basique JavaScript/HTML. Vous ne pourrez pas simultanément (dans la vraie définition du mot) mettre à jour les barres de progression car JavaScript est mono-thread, mais vous pouvez faire défiler les barres de progression en utilisant un intervalle temporisé et mettre à jour chaque barre de progression le progrès de l'individu (ou de tout).

Answer 4

Que diriez-vous d'utiliser un div dans un 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); 
}); 

n'avez pas testé ce code, afin de mettre la communauté wiki sur :)