Eliminare elementi da una lista con animazioni ad effetto grazie a jQuery
Articolo scritto da Maico Orazio
Pagina 2 di 2
Pagina 2 di 2
Come possiamo vedere nell'intestazione (<head>...</head>) abbiamo richiamato tre files: un foglio di stile e due Javascript. Di seguito propongo il codice del foglio di stile che ho utilizzato (personalizzabile secondo le vostre esigenze):
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #cc0000;
}
#main {
width: 500px;
margin-top: 20px;
margin-left: 100px;
}
ol.messaggi {
list-style: none;
font-size: 1.2em;
}
ol.messaggi li {
height: 50px;
border-bottom: #dedede dashed 1px;
}
ol.messaggi li:first-child {
border-top: #dedede dashed 1px;
height: 50px;
}
.delete_button {
float: right;
margin-left: 10px;
font-weight: bold;
}
Oltre al foglio di stile, come detto, vengono richiamati due file Javascript: il primo è il semplice richiamo alla libreria jQuery (che potete scaricare liberamente dal sito jquery.com), mentre il secondo contiene la funzione preposta alla cancellazione del messaggio. Quest'ultimo costituisce il fulcro di tutto il nostro esempio. Di seguito il codice sorgente del file "cancella.js":
$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();
$.ajax({
type: "POST",
url: "deleteajax.php",
data: dataString,
cache: false,
success: function() { parent.fadeOut('slow', function() {$(this).remove();}); }
});
return false;
});
});
La prima riga del nostro codice (che sfrutta le potenzialità offerte da JQuery) permette di catturare l'evento click su ciascun ancora X associata la classe delete_button; subito dopo utilizzando il metodo attr preleviamo il valore del tag id della stessa ancora che rappresenta l'identificativo del messaggio.Per poter cancellare il messaggio utilizzeremo una richiesta asincrona ajax, tramite il metodo $.ajax di jQuery inizializziamo le opzioni: tipo invio dati (POST), url script PHP che effettuerà la cancellazione vera e propria (deleteajax.php), dati da inviare (dataString) e l'opzione success con cui applichiamo l'effetto FadeOut all'elemento della lista quando la chiamata ritorna con successo.
Per finire vi propongo il codice della pagina deleteajax.php contenente alcune semplici istruzioni PHP necessarie ad eliminare il messaggio dal database:
<?php
include("dbconfig.php");
if($_POST['id']) {
$id = $_POST['id'];
$id = mysql_escape_String($id);
$sql = "delete from messaggi where msg_id='$id'";
mysql_query( $sql);
}
?>
Non vi resta che testare il tutto... e gustarvi il bell'effetto prodotto da questa fantastica libreria!
