Correctif « progress » (barre de progression)
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 | |
198 | 300 | |
500 | 500 | |
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", "#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 :