Controllo del Reload e rispristino degli elementi di una PaginaWeb
partendo da questo post
Ho deciso di scrivere questa piccola guida.
Cio' che si vuole ottenere e' una memorizzazione dello Stato degli Elementi di una pagina , in modo che se si esegua una Reload della stessa , gli Elementi riprendano il loro Stato evitando un "Reset" della pagina.
Grazie hai consigli di karl94 , useremo i fragent identifier per memorizzare lo Stato nel URL.
In questo esempio usero' jQuery come script.
Usero' tre Elementi DIV che avranno come Stato Visibile o Nascosto.
Come prima cosa definiamo un pagina HTML di esempio con qualche DIV e dei pulsanti per la modifica del loro Stato
Codice HTML:
...
<body>
<button id="ButtUno">DIV Uno</button>
<button id="ButtDue">DIV Due</button>
<button id="ButtTre">DIV Tre</button>
<div id="DIV1"></div>
<div id="DIV2"></div>
<div id="DIV3"></div>
</body>
...
Quindi definiamo degli stili CSS per distinguere i tre Elementi
Codice:
#DIV1{
width:200px;height:200px;
background:red;
position:absolute;
top:100px;left:50px;
}
#DIV2{
width:200px;height:200px;
background:green;
position:absolute;
top:300px;left:50px;
}
#DIV3{
width:200px;height:200px;
background:blue;
position:absolute;
top:500px;left:50px;
}
Nel <head> della nostra pagina richiameremo la libreria jQuery e scriveremo lo script
Codice:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* creo una matrice con DIV, STATO, HASH */
/* il DIV contiene ID del nostro elemento */
/* lo STATO ha valore 0 quando il DIV e' nascosto 1 quando e' visibile */
/* HASH contiene una stringa per identificare ilnostro elemento */
var vettoreControllo = new Array(3);
for(i=0;i<3;i++){
vettoreControllo[i] = new Array(3);
}
for(i=0;i<3;i++){
vettoreControllo[i][0] = "DIV"+i;
vettoreControllo[i][1] = 0;
vettoreControllo[i][2] = "HashDiv"+i;
}
/* adesso definiamo che all'inizio i nostri elementi siano nascosti */
$("#DIV1").toggle();
$("#DIV2").toggle();
$("#DIV3").toggle();
/* quindi creiamo le funzioni per i button che dovranno nascondere o rendere visibile gli elementi */
$("#ButtUno").click(function(){
$("#DIV1").toggle();
controllo(0);
});
$("#ButtDue").click(function(){
$("#DIV2").toggle();
controllo(1);
});
$("#ButtTre").click(function(){
$("#DIV3").toggle();
controllo(2);
});
/* questa funzione che viene eseguita quando si premo i pulsanti */
/* serve per definire la nostra matrice con STATO , DIV e HASH */
/* ed infine modificare il nostro URL con Hash ricavato */
function controllo(DIV){
/* controllo lo Stato e lo modifico */
if(vettoreControllo[DIV][1]==0){
vettoreControllo[DIV][1] = 1;
}else{
vettoreControllo[DIV][1] = 0;
}
/* creo la variabile Hash e gli assegno il valore in base allo Stato degli Elementi */
var HASH = "";
for(i=0;i<3;i++){
if(vettoreControllo[i][1]==1){HASH+=vettoreControllo[i][2];}
}
/* scrivo la variabile Hash ottenuta nel URL */
location.hash=HASH;
}
/* questa funzione verra' eseguita ogni qual volta che il documento viene caricato */
/* quindi leggera' il nostro URL ed identifichera' quali Hash sono presenti */
/* in modo da rispristinare lo Stato degli Elementi */
function reloadHash(){
/* leggo URL e creo le variabili necessarie al controllo */
var readHash = location.hash;
var div1 = readHash.search("HashDiv0");
var div2 = readHash.search("HashDiv1");
var div3 = readHash.search("HashDiv2");
/* eseguo il controllo delle variabili e ripristino lo Stato degli Elementi e il corrispetivo valore nella matrice */
if(div1!=-1){
$("#DIV1").toggle();
vettoreControllo[0][1] = 1;
}
if(div2!=-1){
$("#DIV2").toggle();
vettoreControllo[1][1] = 1;
}
if(div3!=-1){
$("#DIV3").toggle();
vettoreControllo[2][1] = 1;
}
}
/* chiamo la funzione al caricamento della pagina */
reloadHash();
});
</script>
Chiaramente l'esempio e' strutturato in modo molto semplice per un maggiore comprensione del sistema.
Sia gli Elementi che lo Stato possono variare in base alle esigenze.
Il "Core" del procedimento e' nello script e nella gestione del location.hash .
Ecco il DEMO dell'esempio sopra descritto.
NLSweb
