Barra de progreso de JQuery Texto en línea

Question

Estoy tratando de usar la barra de progreso básica, pero no puedo encontrar el comando css/para poner algo de texto dentro de la barra. Estoy usando esta barra de progreso: http://docs.jquery.com/UI/Progressbar, pero estoy abierto a otros si son tan simples de implementar. Quiero que muestre en la esquina izquierda cierta información estática y luego un porcentaje de completo en algún lugar de la sección de la derecha. Todo el css que intenté hacer acaba de mostrar la información a continuación o al lado de. Además, no estoy seguro de cómo tener realmente este cambio de CSS basado en un método JQuery (nuevo en JQuery).

a continuación es mi JQuery real. No intente comprender el valor de la URL simplemente suponga que devuelve 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); 
     } 

     });  
} 

Gracias

Answer 1

No estoy familiarizado con el plugin, pero con CSS que sólo se puede colocar el div con letras sobre la barra de progreso. No estoy seguro de si funcionaría con divs anidados, ya que el div interno puede borrarse cuando se procesa el contenido de la barra de progreso.

Puede jugar con las posiciones superior e izquierda para colocar el texto exactamente donde desee. De cara puede cambiar dinámicamente a la izquierda, de modo que el texto se mueva con la barra, aunque esto puede ser un poco más complicado.

Z-index no debería ser un problema, pero si desea cambiar el orden de los divs, es posible que deba asegurarse de que el texto tenga un índice Z mayor que la barra.

El 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; 
} 

El HTML:

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

El JS:

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

Answer 2

He mejorado sobre una progressbar concepto ya desarrollado que es simplemente jQuery y CSS basado (pero no usando jquery-ui). Si lo desea, puede mirar en el siguiente enlace para tener sus detalles:

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

Espero que ayude.