Cerca:
Link sponsorizzati

Eliminare elementi da una lista con animazioni ad effetto grazie a jQuery

Articolo scritto da Maico Orazio
Pagina 1 di 2

In questo articolo vi spiegherò come sfruttare la libreria JQuery per gestire l'eliminazione degli elementi presenti in un elenco con animazioni ad effetto.

L'esempio proposto in questo semplice tutorial è ispirato all'effetto prodotto all'atto della cancellazione degli elementi presenti nella bacheca del profilo di Facebook (bello, vero?).

(L'articolo continua più sotto...)

Per prima cosa vi invito a creare un semplice database di prova composto da una sola tabella così strutturata: 

CREATE TABLE messaggi(
msg_id INT PRIMARY KEY AUTO_INCREMENT, 
message TEXT
);
La nostra tabella "messaggi", come potete vedere, è costituita da due soli campi: msg_id con cui identificheremo il messaggio e message che contiene il testo; a questi potrete aggiungere ulteriori campi, a seconda dell'uso che vorrete fare dello script d'esempio.

Ora creiamo un file (che utilizzeremo in inclusione all'interno degli altri script PHP che creeremo) in cui andremo ad impostare la connessione al nostro database: 

<?php
$conn = mysql_connect("HOST", "USERNAME", "PASSWORD") or die(mysql_error());
mysql_select_db("NOME_DB", $conn) or die(mysql_error());
?>
Salviamo il file come "dbconfig.php".
Ora andiamo a creare l'indice (che salveremo come "index.php") degli elementi disponibili, ciascuno corredato da un bottone per la cancellazione: 
<html>
<head>
<title>Cancelare elementi con effetto FadeOut</title>
<link rel="stylesheet" href="stile.css" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cancella.js"></script>
</head>
<body>
<h1>Elenco di elementi cancellabili</h1>
<ol class="messaggi">
<?php
// Collegamento ad database. 
include("dbconfig.php");

// Query di selezione messaggi memorizzati nella tabella MESSAGGI. 
$sql = "select * from messaggi order by msg_id desc"; 

// Eseguo la query. 
$result = mysql_query($sql, $conn); 
while($row = mysql_fetch_array($result)) {
  $message = stripslashes($row["message"]);
  $msg_id = $row["msg_id"];
  
  // Visualizzo i messaggi del risultato della query come una lista di elementi. 
  // A ciascuno aggiungo una X con funzione di cancellazione del messaggio. 
  ?>
  <li><?php echo $message; ?> <a href="#" id="<?php echo $msg_id; ?>" class="delete_button">X</a></li>
  <?php
}
?>
</ol>
</body>
</html>
Come già detto a ciascun elemento di questa lista è associato un link (nel mio esempio ho utilizzato una semplice X) a cui abbiamo associato - tramite un metodo di jQuery - la funzione di cancellazione.

Nella stessa categoria...
E-Learning
Corso AJAXCorso AJAX
Applicazioni Web 2.0 basate su AJAX con ASP, ASP.NET e PHP. A partire da 39 €.
Corso JavascriptCorso Javascript
Guida completa allo scripting lato client. A partire da 39 €.
Corso PHPCorso PHP
Corso completo per la creazione di siti Web dinamici. Sconto -25% sino al 15/02/2012.
Link sponsorizzati