Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

Mostrare e nascondere box con jQuery

Scritto da Fare-internet il 19 gennaio 2010 condividi condividi

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hide/Show box con Jquery</title>
<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>
</head>

<body>
<div id="box">Io sono il box</div>
<a href="javascript:mostra()">Mostra</a>
<a href="javascript:nascondi()">Nascondi</a>
</body>
</html>

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 accedendo al tag div che ha 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.

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

Twitter