Timeline è un termine attualmente sulla cresta dell'onda, dato il lancio (in progress) di Facebook Timeline, importante restyling dei profili Facebook.
Qualora volessimo sviluppare qualcosa di simile per conto nostro...c'è un plugin jQuery anche per questo: il suo nome è jQuery Timelinr e permette di creare timeline di sicuro effetto con layout orizzontali o verticali, con la possibilità di inserire CSS custom e personalizzare una serie di opzioni quali velocità , trasparenza, autoplay.
Il markup HTML da usare è piuttosto pulito: si tratta di due tag ul contenenti rispettivamente indici della timeline (corrispondenti agli anni, di solito) e relativi contenuti. Richiamare il plugin risulta estremamente semplice:
$(function(){
$().timelinr();
});
a meno di indicare come argomento del metodo .timelinr() le opzioni personalizzate. Eccole di seguito:
$(function(){
$().timelinr({
orientation: 'horizontal',
// value: horizontal | vertical, default to horizontal
containerDiv: '#timeline',
// value: any HTML tag or #id, default to #timeline
datesDiv: '#dates',
// value: any HTML tag or #id, default to #dates
datesSelectedClass: 'selected',
// value: any class, default to selected
datesSpeed: 500,
// value: integer between 100 and 1000 (recommended), default to 500 (normal)
issuesDiv : '#issues',
// value: any HTML tag or #id, default to #issues
issuesSelectedClass: 'selected',
// value: any class, default to selected
issuesSpeed: 200,
// value: integer between 100 and 1000 (recommended), default to 200 (fast)
issuesTransparency: 0.2,
// value: integer between 0 and 1 (recommended), default to 0.2
issuesTransparencySpeed: 500,
// value: integer between 100 and 1000 (recommended), default to 500 (normal)
prevButton: '#prev',
// value: any HTML tag or #id, default to #prev
nextButton: '#next',
// value: any HTML tag or #id, default to #next
arrowKeys: 'false',
// value: true/false, default to false
startAt: 1,
// value: integer, default to 1 (first)
autoPlay: 'false',
// value: true | false, default to false
autoPlayDirection: 'forward',
// value: forward | backward, default to forward
autoPlayPause: 2000
// value: integer (1000 = 1 seg), default to 2000 (2segs)
});
});