JavaScript  »  Articoli  »  Programmazione Javascript 

Pop-in di help

L'esempio che stiamo per presentare è ispirato da un modulo di registrazione on-line che ho usato un po' di tempo fa. Provate anche solo a riempire il primo campo: noterete che compare una pop-in, ossia del testo che, visibile quando l'utente inserisce i dati, lo guida nella compilazione.

L'implementazione è abbastanza semplice. Se osservate il codice HTML noterete che non ci sono div aggiuntivi per le pop-in. Il testo viene reperito dall'attributo title di ciascun fieldset: in sostanza, un form con informazioni correlate raggruppate in fieldset separati, ciascuno con il suo titolo, sono le due cose essenziali nell'HTML affinchè lo script funzioni. Quest'ultimo si occupa di:

• Reperire e rimuovere i title di ogni fieldset
• Creare dinamicamente un div class="popin" prima di ciascun fieldset che ne contiene una descrizione, indicata nell'attributo title appena reperito
• Mostrare la pop-in di ciascun fielset quando uno dei suoi campi di input ottiene il focus

Il principio è molto simile a quello dei tooltip con CSS e Javascript (cfr. Articolo: Tooltip con Javascript e CSS):una combinazione di title, Javascript e CSS per avere un effetto dinamico. Vediamo lo script, che è linkato nell'HTML attraverso una semplice istruzione:

<script type="text/Javascript" src="popin.js"></script>

Ed ecco il contenuto del file "popin.js":

window.onload=function(){
if(document.getElementsByTagName && document.createElement)
    Popin();
}

function Popin(){
var fields=document.getElementsByTagName("fieldset");
for(var i=0;i<fields.length;i++){
    var el=fields[i];
    var d=document.createElement("div");
    d.className="popin";
    var s=document.createElement("strong");
    s.appendChild(document.createTextNode("Passo " + (i+1) + ": "));
    d.appendChild(s);
    d.appendChild(document.createTextNode(el.title)));
    el.title="";
    el.parentNode.insertBefore(d,el);
    var inputs=el.getElementsByTagName("*");
    for(var j=0;j<inputs.length;j++){
        inputs[j].ref=d;
        inputs[j].onfocus=function(){this.ref.style.display="block"};
        inputs[j].onblur=function(){this.ref.style.display="none"};
        }
    }
}

Come si può notare, lo script è sorprendentemente breve e usa estensivamente il DOM.

Vediamo i requisiti per poter utilizzare lo script in una qualsiasi pagina HTML con un form:

• Gruppi di elementi correlati dovranno essere raggruppati in fieldset
• I fieldset dovranno avere un attributo title che ne descriva i dati da immettere
• Nel CSS dovrà essere presente una classe div.popin che verrà attribuita al volo al div creato da Javascript sulla base del titolo dei fieldset

Nel CSS quindi, affinchè le cose funzionino, è necessario predisporre una classe aggiuntiva:

div.popin{display: none;float: right;width: 120px;margin-top: 30px;
    padding: 4px;border: 1px solid #6888D0;background-color: #C8D4F8}

Ovviamente, nei vostri progetti potrete divertirvi a modificare dimensioni, colori, bordi e font della pop-in.

Altri articoli

Altre guide

Altre newsletter