Ecco un breve esempio su come si possono creare 2 funzioni javascript che tramite jQuery mostrano o nascondono un box.
Prendiamo ad esempio questo codice:
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
function mostra(){
$("div#box").css("display","block")
}
function nascondi(){
$("div#box").css("display","none")
}
</script>
<style type="text/css" media="screen">
#box{
background-color:#ddd;
font-family:Arial, Helvetica, sans-serif;
}
</style>
<div id="box">Io sono il box</div>
<a>Mostra</a>
<a>Nascondi</a>
Innanzi tutto è necessario includere la libreria jQuery, per fare questo abbiamo utilizzato la riga di codice:
<script type="text/javascript" src="jquery-1.4.min.js"></script>
E abbiamo posto il file jquery-1.4.min.js nella stessa cartella di file HTML.
Successivamente abbiamo creato 2 funzioni javascript mostra e nascondi tramite il seguente codice:
<script type="text/javascript">
function mostra(){
$("div#box").css("display","block")
}
function nascondi(){
$("div#box").css("display","none")
}
</script>
Andiamo a vedere un po’ più nel dettaglio come operano queste funzioni. Scrivendo:
$("div#box")
stiamo selezionando il tag div con id box.
Successivamenente scrivendo:
$("div#box").css("display","block")
stiamo dicendo che del tag in questione stiamo modificando la proprietà display assegnandogli il valore block. Mettendo il valore al block l’elemento selezionato da jQuery verrà mostrato.
Mentre con:
$("div#box").css("display","none")
si assegna alla proprietà display all’elemento il valore none , di fatto nascondendolo.
Come si può notare c’è un discreto risparmio di codice rispetto al javascript classico:
function mostra(){
elem=document.getElementById("box")
elem.style.display="block"
}
Tutto il codice può essere scaricato da qui:
jquery Hide Show