valore Display in jQueryUI ProgressBar

ho creato un semplice jQuery UI ProgressBar:valore Display in jQueryUI ProgressBar

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

Tra le altre cose, mi piacerebbe mostrare del testo nel progresso-bar (per cominciare, mi piacerebbe basta usare il "valore").

Non riesco a farlo funzionare.

Domanda bonus: come si formatta il testo visualizzato (ad esempio colore, allineamento)?

fonte

2009-09-25 Thorsten

Il modo in cui ho fatto è stato:

<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>

È possibile regolare il margin-top e margin-left in modo che il testo si trova al centro della barra di avanzamento. quindi si applica il plugin ProgressBar per gli elementi che hanno classe ProgressBar nella sezione javascript della pagina

Spero che questo aiuto

fonte

2010-06-21 21:00:00 Tri

Invece di introdurre un altro elemento (span) e un nuovo stile, Leverage ciò che già esiste in questo modo:

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

il css("display", "block") è quello di gestire il caso in cui il valore è 0 (jQuery UI imposta un display: none sull'elemento quando il valore è 0).

Se si guarda la fonte di The demo, si noterà che è stato aggiunto uno <div class="ui-progressbar-value">. Si può semplicemente ignorare questa classe nel proprio CSS, come:

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

fonte

2011-10-10 20:13:05 rynop

Sembra che il codice nel collegamento demo sia diverso dal codice qui, ora. Il codice nella demo ha funzionato bene. –

Questa soluzione consente una larghezza variabile in base al testo così come centrare il testo, lo styling del testo, ecc Funziona in Chrome, FF, IE8 e IE8 in modalità compatibilità. Non ho testato IE6.

Html:

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

Script:

$(".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;}

campione di lavoro: http://jsfiddle.net/hasYK/

fonte

2012-02-27 17:27:05 Clay

Dopo armeggiare intorno con alcune soluzioni, in base alla risposte qui, ho finito con questo:

Html:

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

JS:

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

(per essere chiamato all'interno della funzione che aggiorna il valore 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; 
}

Vantaggi:

didascalia è centrato senza posizionamento harcoded (necessario se le modifiche di larghezza caption dinamicamente)
No JS strano manipolazione
semplice e minimale CSS

fonte

2012-06-18 03:02:58 lucianolev

ho usato questo:

<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>

fonte

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>

fonte

2015-11-17 11:26:54 basitjee

considera la possibilità di fornire una spiegazione al tuo codice – arghtype

valore Display in jQueryUI ProgressBar

risposta

Problemi correlati