jquery per esempi: funzioni .show() .hide() e html()
Qualche esempio per interagire con i div in jQuery vedremo le funzioni show hide e html. con una breve introduzione alle funzioni e un esempio pratico di jQuery per nascondere far apparire e cambiare il contenuto di un div.Per seguire questo esempio non è necessaria nessuna conoscenza di jQuery.
<html>
<head>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.js"></script>
<script type="text/javascript">
function ShowPage(idcontent){
$("#"+idcontent).show("slow")
}
function HidePage(idcontent){
$("#"+idcontent).hide("slow");
}
function WritePage(idcontent){
$("#"+idcontent).html("<p>Hello Word! </p><p>Ciao Mondo </p><p>...frase piú di rito non so...</p>");
}
</script>
</head>
<body>
<div id="div" style="border:1px solid #990033;width:300px;">
ciao
</div>
<hr>
<a OnClick="ShowPage('div');">show</a>|
<a OnClick="WritePage('div');">write</a>|
<a OnClick="HidePage('div');">hide</a>
</body>
</html>
il documento è molto semplice contiene un piccolo div con id “div” con scritto ciao, e tre link.
il cuore di tutto in questo caso sta nella chiamata OnClick che chiama le varie funzioni che come parametro hanno il nome del div da interagite
Per esempio analizziamo una delle tre funzioni, in quanto tutte uguali
function ShowPage(idcontent){
$("#"+idcontent).show("slow")
}
La prima riga la dichiarazione di funzione, che accetta una in ingresso una sola variabile idcontent che nel nostro caso è il nome del div. Nella seconda e ultima riga c’è l’operatore magico di jQuery $ con in nostro idcontent e la funzione ad esso associata.
ecco i link per vederle in dettaglio:
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://api.jquery.com/html/
.
Channel on Metacafe