Lezione #id-jq-2013-0003#
Un effetto JQuery molto popolare è hide e la controparte show.
Con hide e show possiamo nascondere o mostrare un elemento del DOM HTML.
Vediamo il seguente codice:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("#nascondi").click(function(){
$("p").hide();
});
$("#mostra").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>Clicca sul bottone "JQuery Hide" per nascondere questo paragrafo</p>
<button id="nascondi">JQuery Hide - nascondi il paragrafo</button>
<button id="mostra">JQuery Show - visualizza il paragrafo</button>
</body>
</html>
Nel DOM HTML avremo:
<p>Clicca sul bottone "JQuery Hide" per nascondere questo paragrafo</p> <button id="hide">JQuery Hide - nascondi il paragrafo</button> <button id="show">JQuery Show - visualizza il paragrafo</button>
– un paragrafo – p –
– un bottone identificato univocamente da un id nascondi
– un bottone identificato univocamente da un id mostra
Lo script JQuery:
$(document).ready(function(){
... i vari comandi da eseguire ...
});
Avvia la funzione solo a documento completamente caricato.
$("#nascondi").click(function(){
$("p").hide();
});
JQuery indicato con il dollaro $, preleva gli elementi con – id nascondi – una volta effettuato il click su di essi, JQuery preleva i paragrafi – p – e li nasconde.
$("#mostra").click(function(){
$("p").show();
});
JQuery indicato con il dollaro $, preleva gli elementi con – id mostra – una volta effettuato il click su di essi, JQuery preleva i paragrafi – p – e li mostra.
La sintassi completa del comando è:
$(selector).hide(speed,callback); $(selector).show(speed,callback);
Dove il parametro – speed – indica il tempo impiegato per portare a termine l’operazione, in parole povere la durata della transizione tra – hide – e – show –
– speed – può essere indicato in millisecondi (1000=1 secondo), slow, fast oppure non specificato. Se omesso il comando viene portato a buon fine senza transizione, immediatamente.
Vediamo un esempio con il parametro speed attivo.
$("button").click(function(){
$("p").hide(1000);
});
Un’altro metodo per nascondere o visualizzare elementi HTML è il metodo – toggle – tradotto: alternare. Con questo metodo è sufficiente ad esempio un solo bottone per invertire la visibilità degli elementi.
$("button").click(function(){
$("p").toggle();
});
La sintassi completa è:
$(selector).toggle(speed,callback);
