Ciao, puoi fare in tanti modi.
Una soluzione potrebbe essere quella di caricare tutte le voci all'interno del tuo div e con jQuery nasconderle tutte inizialmente per poi mostrare sole le due che faranno riferimento ad una certa posizione determinata dai due pulsanti di scorrimento.
Posto un esempio pratico da cui puoi prendere spunto:
codice:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
var eventi; // Array eventi
var idscroll; // Indice della prima voce visibile in eventiselezionati
// Funzione di scorrimento delle voci in eventiselezionati
function scrollEventiSelezionati(skip){
idscroll = Math.min(parseInt((eventi.length-1)/2)*2,Math.max(0,idscroll+skip));
$("#eventiselezionati>div").hide().slice(idscroll,idscroll+2).show();
}
// Simulo il caricamento dei dati e visualizzo i risultati
$("#caricaeventi").click(function(){
eventi = [];
idscroll = 0;
$("#eventi,#eventiselezionati").html("");
for (var i=0;i<=parseInt(Math.random()*20)+1;i++){
eventi[i] = "Evento "+i;
$("#eventi,#eventiselezionati").append("<div>"+eventi[i]+"</div>");
};
// Inizializzo la lista in eventiselezionati
scrollEventiSelezionati(0);
// Al click sui pulsanti richiamo la funzione di scorrimento
$("#prev").click(function(){scrollEventiSelezionati(-2)})
$("#next").click(function(){scrollEventiSelezionati(2)})
})
})
</script>
</head>
<body>
<div style="float:left">
<input type="button" id="caricaeventi" value="CARICA EVENTI"> <- clicca per simulare il caricamento
<fieldset style="width:400px;">
<legend>Tutti gli eventi:</legend>
<div id="eventi">
</div>
</fieldset>
</div>
<div style="float:left">
<fieldset style="width:400px;height:80px">
<legend>Eventi selezionati:</legend>
<div id="eventiselezionati">
</div>
</fieldset>
<input type="button" id="prev" value="PREV">
<input type="button" id="next" value="NEXT">
<- scorri le voci 2 per volta
</div>
</body>
</html>
Rispondi quotando
