Tutorial JQuery : effet de suppression Ajax a la WordPress

Dans l’admin de WordPress (qui utilise JQuery), il y des légers effets de couleurs, d’apparition. Je trouve qu’ils ont un rendu qui fait assez classe.

Je te propose donc un tutorial pour faire plus ou moins le même effet. Pour l’effet de transition de couleur il est nécessaire d’avoir le plugin JQuery.color (dispo ici) et le plugin JQuery.delay pour une meilleure fluidité (au moment de l’appel en Ajax, dispo ici)

Voir la démo

Comme d’habitude, on commence par inporter la librairie JQuery et les plugins nécessaires :

1
2
3
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript" src="jquery.delay.js"></script>

Ensuite on prépare la structure HTML des éléments à supprimer. J’ai choisi des paragraphes (balises <p>) pour que ce soit le plus simple possible, mais libre à vous de le changer et par conséquent de changer les sélecteurs JQuery.

1
2
3
4
5
6
7
8
9
10
<p>Premier élément <a href="#" class="supprimer" rel="1">Supprimer</a></p><!-- on place dans l'attribut rel l'id de l'element à supprimer -->
<p>Deuxième élément <a href="#" class="supprimer" rel="2">Supprimer</a></p>
<p>Troisième élément <a href="#" class="supprimer" rel="3">Supprimer</a></p>
<p>Quatrième élément <a href="#" class="supprimer" rel="4">Supprimer</a></p>
<p>Cinquième élément <a href="#" class="supprimer" rel="5">Supprimer</a></p>
<p>Sixième élément <a href="#" class="supprimer" rel="6">Supprimer</a></p>
<p>Septième élément <a href="#" class="supprimer" rel="7">Supprimer</a></p>
<p>Huitième élément <a href="#" class="supprimer" rel="8">Supprimer</a></p>
<p>Neuvième élément <a href="#" class="supprimer" rel="9">Supprimer</a></p>
<p>Dixième élément <a href="#" class="supprimer" rel="10">Supprimer</a></p>

Enfin, la plus grosse partie : le code JQuery. Les commentaires sont directement dans le code (ils sont également dans le code de la page de démo).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready( function () {
	$('a.supprimer').click(function(e) { // quand on clique sur un lien supprimer
		e.preventDefault(); // annule l'effet du lien pour pas recharger la page
		var id = $(this).attr("rel"); // on recupere l'id de l'element a supprimer (qui est dans l'attribut rel du lien)
		if(confirm('Supprimer cet élément ?')) { // on demande une confirmation
			var parent = $(this).parents("p"); // on recupere le paragraphe parent du lien (qui contient l'element a supprimer)
			$.ajax({ 
				type: "POST", // les variables seront passées en POST (comme d'hab pour les recuperer en php $_POST[id] par exemple)
				url: "suppr.php", // on appelle le fichier php suppr.php qui supprimer l'element de la base de donnees (dans mon cas, ce fichier est vide)
				data: "id="+id+"&act=suppr", // variable que l'on passe au fichier php
				beforeSend: function() {
					parent.animate({'backgroundColor':'#FF3F47'},300); // animation a faire avant l'envoi (on change le fond avec un fondu jusqu'à la couleur #FF3F47)
				},
				success: function(msg){ // en cas de succes
					$(this).delay(1200,function(){ // on attend 1.2 secondes
							parent.slideUp(500,function() { // et on fait disparaitre l'element en l'enroulant
							});
						});
				}
			});
		}
	});
});

Pas encore de billet sur le même sujet !

Cette entrée a été publiée dans JQuery, PHP, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.

5 reponses a Tutorial JQuery : effet de suppression Ajax à la WordPress

  1. BCDE dit :

    Merci pour ce tutoriel il est vraiment bon, seulement ce serait bien si le premier fichier.js était disponible aussi.
    Sinon encore Bravo, j’aime bien ton site

  2. BCDE dit :

    Je m’excuse j’avais pas encore suivie le lien kan g posté le commentaire, j’ai trouvé le fichier merci!
    Sinon j’ai une petite question est ce qu’il est possible de modifier la méthode afin de pouvoir supprimer plusieurs éléments en même temps avec des check box par exemple ?

  3. rjonathan dit :

    Merci pour ce tuto, il est parfait !

  4. David dit :

    Tuto bien expliqué, on peut facilement l’implanté dans son site.

  5. jammali dit :

    comment je peut utlisier sa en symfony..??

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">