Change Bootstrap barra di avanzamento in modo dinamico

Ho il seguente codice HTML, utilizzando Bootstrap:Change Bootstrap barra di avanzamento in modo dinamico

<div class="progress"> 
       <div class="progress-bar progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> 
       </div> 
      </div>

voglio style="width: 0" ad aumentare fino a quando non è al 100%. Ho provato a usare il codice sotto come test, ma non è successo nulla.

<head> 
    <title>Verifying Oracle database...</title> 

    <script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> 
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> 

    <script> 

     $(document).ready(function() { 
      $("#progress-bar").css("width", "50%"); 
      $("#progress-bar").attr("aria-valuenow", "50%"); 
     }); 

    </script> 

</head>

Qualcuno può aiutare a realizzare questo progresso?

Grazie in anticipo.

fonte

2014-10-17 Lucas Rezende

Si sta eseguendo lo script prima che venga caricato l'elemento DOM. È necessario o avvolgerlo in '$ (document) .ready()' o mettere lo script alla fine di '' – Brennan

@Brennan, grazie per la risposta. Ho messo alla fine di '' ma non ha funzionato anche. :( –

Il codice che si utilizza per aggiornare la larghezza è corretto, ma come @Brennan ha sottolineato che deve essere eseguito dopo il rendering della barra di avanzamento - ad es. posizionando il tag script dopo il tag della barra di avanzamento (fiddle) o eseguendolo nel gestore pronto per il documento (fiddle).

Quello che segue è la versione minima che fa quello che si è tentato (i violini emulare il progresso che va da 0 a 100):

$(function() { 
    $("#progress-bar").css("width", "50%"); 
});

Un'altra nota sul codice: insieme con la larghezza della barra di avanzamento si dovrebbe aggiornare lo aria-valuenow attribute che rappresenta il valore corrente di un widget intervallo (qui la barra di avanzamento) per i browser con tecnologia assistiva. Nel tuo esempio hai aria-valuenow 45 ma larghezza 0, che è incoerente.

fonte

2014-10-17 20:15:53 artm

Il nuovo codice dovrebbe funzionare Hai ricevuto messaggi di errore – artm

Grazie mille per una grande barra di avanzamento Ho una modifica secondaria e un commento: Invece del valore + = 10 Sto usando value = parseInt ($ (" #targetPB "). text(), 10) || 0; poiché ho bisogno di pubblicare il valore in targetPB con una chiamata Ajax e che può tornare con" None "- che a sua volta causerà un errore NaN - quindi il parseInt e il || 0 ... se non un numero ha zero. Il commento è che mentre la barra di avanzamento funziona bene in Chrome e Firefox, non funziona in Safari (su Mac) – Toren

Change Bootstrap barra di avanzamento in modo dinamico

risposta

Problemi correlati