JQuery Barre de progression Texte en ligne

Question

J'essaie d'utiliser la barre de progression de base mais je n'arrive pas à comprendre la commande css/pour mettre du texte dans la barre. J'utilise cette barre de progression: http://docs.jquery.com/UI/Progressbar cependant je suis ouvert aux autres s'ils sont aussi simples à implémenter. Je veux qu'il affiche dans le coin gauche des informations statiques puis un pourcentage de complet quelque part dans la section de droite. Tout ce que j'ai essayé de faire juste fait l'affichage des informations ci-dessous ou sur le côté de. De plus, je ne suis pas sûr de savoir comment modifier ce CSS en fonction d'une méthode JQuery (nouvelle version de JQuery).

ci-dessous est mon JQuery réelle. N'essayez pas de comprendre la valeur de l'URL, supposons qu'il renvoie 0-100.

<script type="text/javascript"> 

    var url = "%%$protocol_url%%/bin/task_status?id=%%$tid%%&cmd=percent_done"; 

    $(function() { 
    var progress = 0; 
    //alert("some value" + value, value); 
    $("#progressbar").progressbar({ progress: 0 }); 
    setTimeout(updateProgress, 500); 

}); 


function updateProgress() { 
    var progress; 
    $.get(url, function(data) { 
     // data contains whatever that page returns  

     if (data < 100) { 
      $("#progressbar") 
       .progressbar("option", "value", data); 
      setTimeout(updateProgress, 500); 
     } else { 
      $("#progressbar") 
       .progressbar("option", "value", 100); 
     } 

     });  
} 

Merci

Answer 1

Je ne suis pas familier avec le plug-in, mais avec CSS vous pouvez simplement placer le div avec lettrage sur la barre de progression. Je ne suis pas sûr que cela fonctionnerait avec les divs imbriquées, puisque la div interne peut être effacée quand le contenu de la barre de progression est rendu.

Vous pouvez jouer avec les positions supérieure et gauche pour positionner le texte exactement où vous le souhaitez. En face, vous pouvez changer dynamiquement à gauche, de sorte que le texte se déplace avec la barre, même si cela peut être un peu plus délicat. L'index Z ne devrait pas poser de problème, mais si vous voulez changer l'ordre des divs, vous devrez peut-être vous assurer que le texte a un index z plus grand que la barre.

Le CSS:

#bardivs { 
    width:400px; /* or whatever the of the porgress bar is */ 
    /* 
     The position of #bardivs must be something other than 
     static (the default) so that its children will be positioned 
     relative to it. 
    */ 
    position:relative; 
} 
#progresstext { 
    position:absolute; 
    top:0; 
    left:0; 
} 

Le code HTML:

<div id="bardivs"> 
    <div id="progressbar"></div> 
    <div id="progresstext"></div> 
</div> 

La JS:

$("#progressbar").progressbar("option", "value", data); 
$("#progresstext").html("<p>Hard code or string here<p>"); 

Answer 2

Je me suis amélioré sur un concept progressbar déjà développé qui est tout simplement jquery et CSS basé (mais pas en utilisant jquery-ui). Si vous voulez, vous pouvez consulter le lien suivant pour avoir ses détails:

http://progressbar-simple.blogspot.com/

espoir qui aide.