Vantaggi dell’utilizzo dei layer

Utilizzare i layer nel web comporta notevoli ed interessanti vantaggi:

1. l'utente vede solo ciò che deve vedere al momento:

       1.1 possiamo facilmente indirizzarlo a compiere solo quelle operazioni che effettivamente può compiere nel contesto nel quale si trova all'interno dell'applicativo;

        1.2 possiamo dare all'utente l'idea che l'applicazione sia molto veloce: ogni qual volta egli clicca su qualche voce di menu, l'operazione da lui richiesta è istantanea;

2. ci sono molteplicità di situazioni e obiettivi in cui possono essere impiegati:

       2.1 nei menu per far comparire/scomparire vari sotto-menu;

       2.2 per far comparire/scomparire informazioni e parti intere della pagina;

       2.3 per dare messaggi all'utente dopo aver compiuto certe operazioni;

       2.4 per informare l'utente dello stato del caricamento delle pagine o di alcune funzionalità

       2.5 per quanto altro vi possa venire in mente...

3. se utilizzati bene, possono rendere l'applicativo elegante e allo stesso tempo molto funzionale, navigabile e molto gradevole per l'utente;

4. l'implementazione è banale.

Dunque poco dispendio di inutili energie per il programmatore e ottimi effetti per l'utente che utilizza l'applicativo. Provare per credere.

Mostra / nascondi Div (layer)

Ecco alcune semplici ma utilissime funzioni javascript utilizzate nei post sul messaggio di "caricamento in corso" ed in quello sui messaggi di notifica per l'utente:

1. funzione HideContent(d) che nasconde il div passato in input

function HideContent(d) {   if(d.length < 1) { return; }   document.getElementById(d).style.display = "none"; }

2. funzione ShowContent(d) che mostra il div passato in input

function ShowContent(d) {   if(d.length < 1) { return; }   document.getElementById(d).style.display = "block"; }

3. funzione ReverseContentDisplay(d) che inverte lo stato del div rendendolo visibile se non lo era o nascondendolo se veniva mostrato all'utente

function ReverseContentDisplay(d) {   if(d.length < 1) { return; }   if(document.getElementById(d).style.display == "none") {     document.getElementById(d).style.display = "block";   }   else { document.getElementById(d).style.display = "none"; } }

Ecco un esempio pratico riassuntivo (↗) che mostra in azione queste funzioni.