jQuery Timelinr est un plugin jQuery qui permet de créer un effet de ligne temporelle verticale ou horizontale avec d’un côté des dates et de l’autre des événements. Une démonstration valant mieux qu’un long discours voici deux exemples : défilement horizontal, défilement vertical.
Le marquage HTML nécessaire est constitué de deux listes :
<div id="timeline">
<ul id="dates">
<li><a href="#" class="selected">date1</a></li>
<li><a href="#">date2</a></li>
</ul>
<ul id="issues">
<li id="date1" class="selected">
<p>Lorem ipsum.</p>
</li>
<li id="date2">
<p>Lorem ipsum.</p>
</li>
</ul>
<a href="#" id="next">+</a> <!-- opcional -->
<a href="#" id="prev">-</a> <!-- opcional -->
</div>
L’appel de jQuery Timelinr avec les paramètres par défaut s’effectue de la manière suivante :
<script>
$(function(){
$().timelinr();
});
</script>
Via +Valentin Brandt
[...] collègue de js4design a remonté un plugin vachement beau et qui peut se révéler pratique pour des designers. jQuery [...]