..


Enlaces patrocinados

Eliminar elementos de una lista de efectos de animación con jQuery

Artículo escrito por Horacio Maico
Página 1 de 2

En este artículo voy a explicar cómo usar la biblioteca jQuery para manejar la eliminación de elementos de una lista con efecto de animación.

El ejemplo dado en este sencillo tutorial está inspirado en el efecto producido sobre la eliminación de elementos en el tablón de anuncios del perfil de Facebook (bonito, ¿eh?).

En primer lugar, te invitamos a crear una base de datos de prueba consta de una sola tabla estructurada de esta manera: 

 



 Creando puestos de MESA (







 msg_id INT AUTO_INCREMENT CLAVE PRIMARIA,

 





 Mensaje de texto







 );
Nuestra mesa de "mensajes", como se puede ver, que consta de sólo dos campos: msg_id que identificar el mensaje y el mensaje que contiene el texto, estos se pueden agregar más campos, en función del uso de la escritura que usted quiere hacer " ejemplo.

Ahora creamos un archivo (que vamos a utilizar en la inclusión dentro del script PHP que va a crear otros), donde vamos a configurar la conexión a nuestra base de datos: 






 <? Php







 $ Conn = mysql_connect ("host", "username", "contraseña") or die (mysql_error ());







 mysql_select_db ("db_name", $ conexion) or die (mysql_error ());







 >
Guarde el archivo como "dbconfig.php".
Ahora vamos a crear el índice (que guardar como "index.php") de productos disponibles, cada uno acompañado por un botón para borrar: 





 <html>







 <head>







 artículos <title> con efecto FadeOut Cancela </ 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>







 Lista <h1> de los elementos eliminados </ h1>







 <ol class="messaggi">







 <? Php







 / / Conexión a bases de datos.

 





 include ("dbconfig.php");









 / / Seleccionar mensajes de consulta almacenado en la tabla MENSAJES.

 





 $ Sql ​​= "select * from Para mensajes msg_id DESC";

 







 / / Ejecutar la consulta.

 





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

 





 while ($ fila = mysql_fetch_array ($ resultado)) {



  



 $ Mensaje = stripslashes ($ row ["mensaje"]);



  



 $ Msg_id = $ row ['msg_id'];



  

  



 / / Mostrar el resultado de los mensajes de consulta como una lista de elementos.

 

  



 / / Añadir una X para cada función de eliminar el mensaje.

 

  



 >



  



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



  



 <? Php







 }







 >







 </ Ol>







 </ Body>







 </ HTML>
Como ya se ha dicho a cada elemento de esta lista tiene un vínculo asociado (en mi ejemplo he usado una X simple) que asociamos - un método para usar jQuery - la función de borrado.

En la misma categoría ...
E-Learning
ASP Cero (Ebook) ASP Cero (Ebook)
Aprendizaje de Microsoft ASP y VBScript desde cero. Con sólo 29 €.
Javascript (Curso) Javascript (Curso)
Guía completa de scripting del lado del cliente. A partir de 39 €.
PHP (Curso) PHP (Curso)
Ciclo completo para la creación de sitios Web dinámicos. A partir de 49 €.
Enlaces patrocinados