..


Liens sponsorisés

Supprimer les éléments d'une liste d'effet d'animation avec jQuery

Article écrit par Horace Maico
Page 1 sur 2

Dans cet article je vais vous expliquer comment utiliser la bibliothèque JQuery pour gérer l'élimination des éléments dans une liste, avec effet d'animation.

L'exemple proposé dans ce tutoriel est inspiré par l'effet produit sur la suppression d'éléments dans le panneau d'affichage du profil Facebook (belle, hein?).

Tout d'abord, je vous invite à créer une base de données de test se compose d'un seul tableau structuré comme ceci: 

 



 CREATE TABLE messages (







 msg_id INT PRIMARY KEY AUTO_INCREMENT,

 





 Texte du message







 );
Notre table "messages", comme vous pouvez le voir, il se compose de seulement deux champs: msg_id identifier avec le message et le message qui contient le texte, ils peuvent ajouter des champs supplémentaires, en fonction de l'utilisation du script que vous voulez faire d ' par exemple.

Maintenant, créez un fichier (ce que nous allons utiliser dans l'inclusion dans le script PHP qui va créer d'autres) où nous allons définir la connexion à notre base de données: 






 <? Php







 $ Conn = mysql_connect ("host", "username" "password") or die (mysql_error ());







 mysql_select_db ("database", $ conn) or die (mysql_error ());







 ?>
Enregistrez le fichier sous "dbconfig.php".
Maintenant, nous allons créer l'index (ce qui va enregistrer en tant que "index.php") d'articles disponibles, accompagnés chacun par un bouton de suppression: 





 <html>







 <head>







 articles <title> avec effet Cancela 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>







 Liste <h1> des éléments supprimés </ h1>







 <ol class="messaggi">







 <? Php







 / / Connexion à la base de données.

 





 include ("dbconfig.php");









 / / Sélectionner les messages de requêtes stockées dans la table de MESSAGES.

 





 $ Sql ​​= "select * from messages par ordre msg_id DESC";

 







 / / Exécute la requête.

 





 $ Result = mysql_query ($ sql, $ conn);

 





 while ($ row = mysql_fetch_array ($ result)) {



  



 $ Message = stripslashes ($ row ["message"]);



  



 Msg_id = $ row ['msg_id'];



  

  



 / / Affichage du résultat des messages de requête comme une liste d'éléments.

 

  



 / / Ajouter un X pour chaque fonction de la suppression du poste.

 

  



 ?>



  



 <li> <? php echo $ message;?> <a href = "#" id = "<php ​​echo $ msg_id;?>" class = "delete_button"> X </ a> </ li>



  



 <? Php







 }







 ?>







 </ Ol>







 </ Body>







 </ Html>
Comme déjà dit à chaque élément de cette liste est associée à un lien (dans mon exemple, j'ai utilisé une X simple) nous associons - une méthode d'utilisation de jQuery - la fonction de suppression.

Dans la même catégorie ...
E-Learning
ASP Zéro (ebook) ASP Zéro (ebook)
Apprendre Microsoft ASP et VBScript à partir de zéro. À seulement 29 €.
Javascript (Cours) Javascript (Cours)
Guide complet pour les scripts côté client. A partir de 39 €.
PHP (cours) PHP (cours)
Cours complet pour la création de sites Web dynamiques. A partir de 49 €.
Liens sponsorisés