- Passer au contenu principal
- Passer à « À propos de ce site »

# Correctif « progress » (barre de progression)

- Documentation
- Questions ou commentaires?

## But

L'élément « `progress` » de HTML5 affiche la progression d'une tâche. Étant donné que certains navigateurs ne prennent pas en charge cette fonctionnalité à l'origine, ce correctif émule la même fonctionnalité à l'aide de HTML générique et WAI-ARIA.

## Exemples

Valeur | Max | Résultat
--- | --- | ---
22 | 100 | 22 %
198 | 300 | 66 %
500 | 500 | 100 %
| 82%

Visualiser le code

### HTML

    <table class="table table-striped">
    		<thead>
    			<tr>
    				<th scope="col">Valeur</th>
    				<th scope="col">Max</th>
    				<th scope="col">Résultat</th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td>22</td>
    				<td>100</td>
    				<td><progress value="22" max="100"><span class="wb-inv">22 %</span></progress></td>
    			</tr>
    			<tr>
    				<td>198</td>
    				<td>300</td>
    				<td><progress value="198" max="300"><span class="wb-inv">66 %</span></progress></td>
    			</tr>
    			<tr>
    				<td>500</td>
    				<td>500</td>
    				<td><progress value="500" max="500"><span class="wb-inv">100 %</span></progress></td>
    			</tr>
    			<tr>
    				<td colspan="2"><button class="btn btn-default" id="update-progress" type="button">Réactualiser</button></td>
    				<td><progress id="updateTest" value="82" max="100"><span class="wb-inv">82%</span></progress></td>
    			</tr>
    		</tbody>
    	</table>

### JavaScript (démo seulement)

    (function( $, wb ) {
    "use strict";

    $( document ).on( "click vclick", "#update-progress", function() {
    	var $elm = $( "#updateTest" ),
    		valuenow = parseInt( $elm.attr( "value" ), 10 ),
    		newValue = valuenow === parseInt( $elm.attr( "max" ), 10 ) ? 0 : valuenow + 1;

    	$elm
    		.attr( "value", newValue )
    		.find( "span" )
    			.text( newValue + "%" );

    	// Update the visuals
    	$elm.trigger( "wb-update.wb-progress" );
    });

    })( jQuery, wb );

Date de modification :
  2014-07-20