Volando come un Rasteriz

Mi sto divertendo con jQuery ed ormai credo di poter lanciare uno shuttle con jQuery ahahaha (magari farò un div che parte dal bottom e arriva al top per poi sparire nel cielo…).

Nell’articolo di oggi, vedremo come creare una tabella html classica, ed estenderla con la possibilità di rimuovere le sue righe con uno splendido effetto a scomparsa. Iniziamo.
Creiamo la pagina esempio.html e mettiamo al suo interno quello che segue:

<script language="javascript" type="text/javascript" src="js/jquery-1.3.2.min.js"><!-- //--></script>
<script language="javascript" type="text/javascript" src="js/jquery.rimuovi_riga.js"><!-- //--></script>

<table width="100%" border="0" style="border: 1px solid #999; background-color:#CCC;">
 <tr>
 <th align="left">Nome</th>
 <th align="left">Cognome</th>
 <th align="left">ad</th>
 </tr>
 <tr>
 <td>Gian</th>
 <td>Pall</td>
 <td title="Elimina riga"><a href="Javascript:void(0);" onclick="$(this).parent().parent().rimuovi_riga(600);">Elimina</a></td>
 </tr>
 <tr>
 <td>Pinco</th>
 <td>Pallino</td>
 <td title="Elimina riga"><a href="Javascript:void(0);" onclick="$(this).parent().parent().rimuovi_riga(600);">Elimina</a></td>
 </tr>
</table>

Bene… ora creiamo un semplice plugin jQuery per dare vita alla funzione rimuovi_riga:

(function($){
 $.fn.rimuovi_riga = function(tempo, callback) {
 var riga = this;

 if (tempo==null)
 tempo = 1000;

 riga.animate({'opacity': 0}, tempo, function() {
 riga.children("td").each(function() {
 $(this).wrapInner("<div></div>").children("div").slideUp(function() {
 riga.hide();
 riga.remove();
 });
 });
 });

 if (callback != null)
 callback();
 };
})(jQuery);

et voila! il gioco è fatto.

Se volete scaricare l’archivio del progetto d’esempio da me sviluppato, cliccate qui.

UPDATE (08/01/2010):

[FIX]: corretto il bug che faceva perdere l’effetto scomparsa sulle tabelle lunge (grazie a Maurizio per la segnalazione!)

Condividi questo testo

Articoli suggeriti:

1. Scorrere le immagini con un effetto a scomparsa utilizzando jQuery
2. Intercettare evento scroll con jQuery
3. Un calendario (datapicker) per i nostri form con jQuery UI
4. Scopriamo quanto è facile effettuare una richiesta AJAX con jQuery
5. jQuery (ed altre librerie) sempre aggiornate e caricate più velocemente grazie a Google