Lezione #id-jq-2013-0005#
Un effetto molto utilizzato di JQuery è la diapositiva – slide -. In questa lezione vediamo di impararlo in pochi semplici passi! Yes!.
Metodo: slideDown() -> diapositiva verso il basso
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(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click per far slittare il pannello verso il basso</div>
<div id="panel">Hello world!</div>
</body>
</html>
Nel DOM HTML avremo:
<div id="flip">Click per far slittare il pannello verso il basso</div> <div id="panel">Hello world!</div>
Un divisorio identificato da – id=”flip” –
Un divisorio identificato da – id=”panel” –
Lo script CSS:
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
In particolare osserviamo:
#panel
{
padding:50px;
display:none;
}
Il pannello che slitterà verso il basso presenta la proprietà display:none;, cioè non viene visualizzato a video.
La visualizzazione è demandata allo script JQuery:
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
JQuery richiamato con il simbolo – .$ -, attende che la pagina sia completamente scaricata – . ready -, al click sull’elemento del DOM con id – #flip -, sarà attivato il metodo – slideDown – per l’elemento con id – #panel –
La sintassi completa è:
$(selector).slideDown(speed,callback);
Il parametro speed può essere indicato in “slow”, “fast” o millisecondi (1000=1 secondo).
Metodo: slideUp() -> diapositiva verso l’alto
La sintassi completa è:
$(selector).slideUp(speed,callback);
Un esempio di script:
$("#flip").click(function(){
$("#panel").slideUp();
});
Metodo: slideToggle() -> diapositiva alternata
Con un unico elemento DOM posso effettuare lo slideDown() e lo slideUp()
La sintassi completa è:
$(selector).slideToggle(speed,callback);
Un esempio di script:
$("#flip").click(function(){
$("#panel").slideToggle();
});
Un esempio utile per realizzare dei contenuti a comparsa:
<!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(){
$("#flip").click(function(){
$("#panel").slideToggle();
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click per far slittare il - div -</div>
<div id="panel">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</div>
</body>
</html>
