jQuery e Wordpress lavorano insieme, quindi è naturale che molti degli effetti sugli elementi di una pagina vengano gestiti da Wordpress tramite jQuery. Un effetto sicuramente interessante è quello che jQuery opera sui commenti di Wordpress: il commento può essere accettato, marcato come spam o eliminato e per ciascuno di questi stati jQuery aggiunge un effetto al blocco di testo che contiene il commento. Di solito il blocco cambia il suo colore di sfondo (tramite il plugin Color di jQuery) e quindi scompare o cambia il colore del testo a seconda del fatto che il commento venga eliminato o approvato). In questo articolo mostrerò come ottenere un effetto simile che richiami l'effetto originale usato in Wordpress.
Partiamo dalla struttura HTML:
<div class="pane">
<h3><!-- autore del commento --></h3>
<p><!-- testo del commento --></p>
<p><!-- azioni --></p>
</div>
Nel nostro documento HTML abbiamo anche inserito il plugin Color. Le azioni per ciascun commento sono unite a tre link HTML con le seguenti classi CSS:
.btn-delete: cancella il commento mostrando prima una finestra di dialogo per confermare la scelta.btn-unapprove: marca il commento come spam.btn-approve: approva il commento.btn-spam: rimuove un commento marcato come spam dalla lista dei commenti
Nel nostro CSS abbiamo bisogno di specificare una classe per marcare i commenti come spam:
.spam {
color: #999;
}
Procediamo quindi con jQuery a definire le azioni per ciascun link. La prima azione è la cancellazione:
$('a.btn-delete', 'div.pane').click(function(event) {
var $a = $(this);
var comment = $a.parents('div.pane');
var question = confirm('Sei sicuro di voler cancellare questo commento?');
if(question) {
comment.animate({
backgroundColor: '#fbc7c7'
}, 'slow', function() {
$(this).animate({
opacity: 0
}, 'slow', function() {
$(this).remove();
});
});
} else {
return false;
}
event.preventDefault();
});
La funzione confirm() restituisce un valore booleano che può essere true se l'utente ha cliccato su 'OK' e false se invece ha cliccato su 'Annulla'. Come si può notare, il metodo animate() viene potenziato dal plugin Color cosicchè è in grado di mostrare un'animazione sul colore di sfondo dell'elemento.
La seconda azione ci permette di marcare il commento come spam:
$('a.btn-unapprove', 'div.pane').click(function(event) {
var $a = $(this);
var comment = $a.parents('div.pane');
comment.animate({
backgroundColor: '#fff568'
}, 'slow', function() {
$(this).animate({
backgroundColor: '#ffffff'
}, 'slow', function() {
$(this).addClass('spam');
});
});
event.preventDefault();
});
In questo caso usiamo la funzione di callback della seconda chiamata al metodo animate() per aggiungere la classe spam all'elemento. La terza azione prevede l'approvazione del commento:
$('a.btn-approve', 'div.pane').click(function(event) {
var $a = $(this);
var comment = $a.parents('div.pane');
comment.animate({
backgroundColor: '#dafda5'
}, 'slow', function() {
$(this).animate({
backgroundColor: '#ffffff'
}, 'slow', function() {
$(this).removeClass('spam');
});
});
event.preventDefault();
});
In questo caso rimuoviamo semplicemente la classe spam. La quarta e ultima azione, invece, rimuove un commento marcato come spam dall'elenco dei commenti:
$('a.btn-spam', 'div.pane').click(function(event) {
var $a = $(this);
var comment = $a.parents('div.pane');
comment.animate({
backgroundColor: '#fbc7c7'
}, 'slow', function() {
$(this).animate({
opacity: 0
}, 'slow', function() {
$(this).remove();
});
});
event.preventDefault();
});
Potete visionare l'esempio finale in questa pagina.