Valor indicado en jQueryUI ProgressBar

He creado un simple jQuery UI ProgressBar:Valor indicado en jQueryUI ProgressBar

<script type="text/javascript"> 
    $(function() { 
     $("#progressbar").progressbar({ 
       value: 35 
     }); 
    }); 
</script> 
<div id="progressbar"> </div>

Entre otras cosas, me gustaría mostrar un texto en la barra de progreso (para empezar, me gustaría solo usa el "valor").

Parece que no puedo hacer que esto funcione.

Pregunta de bonificación: ¿Cómo formateo el texto que se muestra (por ejemplo, color, alineación)?

Fuente

2009-09-25 Thorsten

La forma en que lo hice fue:

<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>

Se puede ajustar el margen superior e izquierda margen para que el texto se encuentra en el centro de la barra de progreso. A continuación, se aplica el plugin progressbar para los elementos que tienen progressbar clase en la sección de JavaScript de la página

Esperanza esta ayuda

Fuente

2010-06-21 21:00:00 Tri

En lugar de introducir otro elemento (span) y un nuevo estilo, el apalancamiento lo que ya existe como esta:

var myPer = 35; 
$("#progressbar") 
    .progressbar({ value: myPer }) 
    .children('.ui-progressbar-value') 
    .html(myPer.toPrecision(3) + '%') 
    .css("display", "block");

el css("display", "block") es manejar el caso en que el valor es 0 (jQuery UI establece un display: none sobre el elemento cuando el valor es 0).

Si mira la fuente de The demo, observará que se ha agregado <div class="ui-progressbar-value">. Simplemente puede anular esta clase en su propio CSS, como:

.ui-progressbar-value { 
    font-size: 13px; 
    font-weight: normal; 
    line-height: 18px; 
    padding-left: 10px; 
}

Fuente

2011-10-10 20:13:05 rynop

Parece que el código en el enlace de demostración es diferente al código aquí, ahora. El código en la demostración funcionó bien. –

Esta solución permite un ancho flexible basado en el texto, así como centrar el texto, el estilo del texto, etc. Funciona en Chrome, FF, IE8 e IE8 en modo de compatibilidad. No probé IE6.

HTML:

<div class="progress"><span>70%</span></div>

Guión:

$(".progress").each(function() { 
    $(this).progressbar({ 
     value: 70 
    }).children("span").appendTo(this); 
});

CSS:

.progress.ui-progressbar {position:relative;height:2em;} 
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;} 
.progress[aria-valuenow="0"] span {margin-top:0px;}

muestra de trabajo: http://jsfiddle.net/hasYK/

Fuente

2012-02-27 17:27:05 Clay

Después de perder el tiempo con algunas soluciones, basado en el respuestas aquí, he terminado con éste:

HTML:

<div id="progress"><span class="caption">Loading...please wait</span></div>

JS:

$("#progress").children('span.caption').html(percentage + '%');

(que se llamará dentro de la función que actualiza el valor progressbar)

CSS:

#progress { 
    height: 18px; 
} 

#progress .ui-progressbar { 
    position: relative; 
} 

#progress .ui-progressbar-value { 
    margin-top: -20px; 
} 

#progress span.caption { 
    display: block; 
    position: static; 
    text-align: center; 
}

Ventajas:

Leyenda se centra sin posicionamiento harcoded (necesario si cambios de ancho de subtítulos DINAMICALLY)
Sin JS extraña manipulación
Simple CSS y mínima

Fuente

2012-06-18 03:02:58 lucianolev

que utilizan este:

<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>

Fuente

2012-09-18 14:04:12 user1477388

<style> 
     #progress { 
      height: 18px; 
     } 

     #progress .ui-progressbar { 
      position: relative; 
     } 

     #progress .ui-progressbar-value { 
      margin-top: -20px; 
     } 

     #progress span.caption { 
      display: block; 
      position: static; 
      text-align: center; 
     } 

    </style> 
</head> 
<body> 
    test 
    <div id="progressbar"></div> 
    <br> 
    test2 
    <div id="progressbar2"></div> 

    <script> 
     $("#progressbar").progressbar({ 
      max : 1024, 
      value : 10 
     }); 

     $("#progressbar2").progressbar({ 
      value : 50 
     }); 

     $(document).ready(function() { 
      $("#progressbar ").children('div.ui-progressbar-value').html('10'); 
      $("#progressbar2 ").children('div.ui-progressbar-value').html('50%'); 

     }); 

    </script> 

</body>

Fuente

2015-11-17 11:26:54 basitjee

considera dar una explicación a tu código – arghtype

Valor indicado en jQueryUI ProgressBar

Respuesta

Cuestiones relacionadas