In questo articolo Javascript sarà presentato il prototipo di un componente per la visualizzazione di elementi HTML in continuo scorrimento con un effetto slide.
Il componente, ri-adattato graficamente per esigenze di layout e con qualche effetto più accattivante (per esempio fade-in e fade-out), è stato utilizzato sulla home page di un cliente per mostrare in costante movimento le ultime news pubblicate.
Per la realizzazione del componente è stato utilizzato il framework javascript JQuery, precisamente la versione 1.4.3, ed il risultato è uno script cross-browser testato su IE7, FireFox 3.6 e 4beta, Chrome v.7 ed Opera 10.
L'intero codice sorgente dell'esempio e libreria JQuery utilizzata sono comodamente e liberamente scaricabili in formato .zip al seguente indirizzo.
Codice HTML
Il codice HTML necessario è stato ridotto al minimo per semplificare più possibile la parte javascript dell'esempio.
<body> <div id="container"></div> </body>
Come premesso, all'interno del BODY è presente solo il DIV nel quale fare apparire e sparire continuamente le news.
Codice CSS
L'esempio, anche se abbastanza grezzo, è comunque minimamente presentabile dal punto di vista grafico e per ottenere questo si è agito su qualche proprietà CSS dei vari elementi della pagina.
body{text-align:center;}
div#container{
overflow: hidden;height:200px;width: 100px;
text-align: center;border: 1px solid black;margin:auto;}
.news{
height:30px;width:80px;border:1px dashed black;
vertical-align:middle;margin:auto;background-color: silver;}
.label{
font-weight: bold; background-color: black;
color: white;width: 100%; margin-bottom:1px;}
Alcune classi CSS, ancora non utilizzate, saranno successivamente adoperate dinamicamente tramite javascript.
Codice Javascript
Il codice Javascript è abbastanza semplice, ben commentato e presentato chiaramente. L'unica funzionalità avanzata presente è la chiamata alla funzione setInterval(function, millisec) che, ad intervalli regolari(ogni 1.5 secondi), esegue la funzione cicleNewsForFadeOut() passatale come primo parametro.
/** Array contenente le news da visualizzare. */
var newsArr = ["Notizia 1","Notizia 2","Notizia 3"
,"Notizia 4","Notizia 5","Notizia 6","Notizia 7"];
/** Array che conterrà i componenti HTML da gestire. */
var elNewsArr = [];
/** Indice degli elementi HTML trattati. */
var index = -1;
/**
* Al caricamento della pagina creo i DIV contenenti le news
* e li appendo al DOM. Poi attivo l'effetto.
*/
$(document).ready(function(){
createNews();
drawNews();
setInterval(cicleNewsForFadeOut,1500);
});
/** Crea gli elementi HTML a partire dal contenuto delle news. */
function createNews(){
for(var k=0; k<newsArr.Length; k++){
elNewsArr[k] =
$('<div class="news">' + newsArr[k] + "</div>");
}
}
/** Aggiunge gli elementi HTML al contenitore. */
function drawNews(){
$("#container")
.html('<div class="label">Ultime news</div>');
for(var k=0; k<elNewsArr.Length; k++){
$("#container").append($(elNewsArr[k]));
}
}
/**
* Richiamata ad intervalli regolari,
* crea l'effetto slide delle news.
*/
function cicleNewsForFadeOut(){
//Attenzione: indice incrementato.
var el = elNewsArr[++index];
$(el).hide("fast");
if(index >= elNewsArr.Length){
index = -1;
$('.news').toggle();
}
}
Il meccanismo è governato dal valore che via via assume la variabile globale index, incrementata ad ogni richiamo di cicleNewsForFadeOut(): nel caso in cui il suo valore fosse uguale o superiore al numero di news da pubblicare, index verrà resettato e tutte le news nascoste saranno rese nuovamente visibili.
Alla prossima,
MA
0 commenti:
Posta un commento
Non ti è chiaro qualcosa?
No problem, posta il tuo dubbio ;)
..... e ricordati di firmarlo!