Sponsored Links
Delete items from a list of animation effect with jQuery
Article written by Horace Maico
Page 1 of 2
Page 1 of 2
In this article I will explain how to use the JQuery library to handle the removal of items in a list with animation effect.
The example given in this simple tutorial is inspired by the effect produced upon the deletion of items in the bulletin board of the Facebook profile (nice, huh?).
First, I invite you to create a test database consists of a single table structured like this:
CREATE TABLE posts ( msg_id INT PRIMARY KEY AUTO_INCREMENT, Message Text );Our table "messages", as you can see, it consists of only two fields: msg_id which will identify the message and message that contains the text, these can add more fields, depending on usage of the script you want to do ' example.
Now create a file (which we will use in inclusion within the PHP script that will create other) where we're going to set the connection to our database:
<? Php
$ Conn = mysql_connect ("HOST", "USERNAME" "PASSWORD") or die (mysql_error ());
mysql_select_db ("db_name", $ conn) or die (mysql_error ());
?>
Save the file as "dbconfig.php".
Now let's create the index (which will save as "index.php") of available items, each accompanied by a button for deleting:
<html>
<head>
<title> items with effect 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>
<h1> List of deleted items </ h1>
<ol class="messaggi">
<? Php
/ / Connecting to database.
include ("dbconfig.php");
/ / Select Query messages stored in the table MESSAGES.
$ Sql = "select * from messages order by msg_id DESC";
/ / Execute the query.
$ Result = mysql_query ($ sql, $ conn);
while ($ row = mysql_fetch_array ($ result)) {
$ Message = stripslashes ($ row ["message"]);
$ Msg_id = $ row ['msg_id'];
/ / Displaying the result of the query messages as a list of items.
/ / Add an X to each function of deleting the post.
?>
<li> <? php echo $ message;?> <a href = "#" id = "<? php echo $ msg_id;?>" class = "delete_button"> X </ a> </ li>
<? Php
}
?>
</ Ol>
</ Body>
</ Html>
As already said to each item in this list has an associated link (in my example I used a simple X) we associate - a method of using jQuery - the delete function.
In the same category ...
E-Learning
 |
ASP Zero (Ebook)
Learning Microsoft ASP and VBScript from scratch. At only 29 €. |
 |
Javascript (Course)
Complete guide to client-side scripting. From 39 €. |
 |
PHP (Course)
Full course for creating dynamic Web sites. From 49 €. |
Sponsored Links