Botón "Más" de Twitter estilo
Página 1 de 2
En este artículo voy a explicar cómo volver a crear el efecto de "Más" para Twitter usando la biblioteca jQuery.
El botón que desea volver a crear, para los no iniciados, le permite ampliar la lista de mensajes que aparecen por defecto, sin necesidad de actualizar la página (lo cual es posible gracias a la tecnología Ajax cada vez más utilizado en entornos de Web 2.0).
Comenzamos por crear una base de datos de prueba consta de una sola tabla:
Creando puestos de MESA ( msg_id INT AUTO_INCREMENT CLAVE PRIMARIA, Mensaje de texto );Como se puede ver la tabla que acaba de construir se compone de sólo dos campos:
- msg_id que identifican el mensaje;
- y el mensaje que contiene el texto;
Para mi comodidad he creado un archivo PHP (que voy a utilizar en la inclusión) en el que puedo hacer sólo la conexión a la base de datos y lo llamó "dbconfig.php"
<? Php
$ Conn = mysql_connect ("host", "username", "contraseña") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ conexion) or die (mysql_error ());
>
Como se mencionó en el archivo "dbconfig.php" serán incorporados a los ficheros que creamos, para no volver a escribir el mismo código varias veces.
Para llevar a cabo el efecto es necesario crear dos archivos:
- los primeros para la presentación de los primeros "n" mensajes;
- y una segunda que se harán peticiones ajax (implementado con jQuery) para mostrar la "siguiente mensaje".
<html>
<head>
Botón de Twitter más <title> estilo </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Function () {
$ ('. Más "). Haga clic en (function () {
var elemento = $ (this);
var msg = element.attr ('id');
$ ('# Morebutton) Html (' <img /> src="loading.gif" ').;
$. Ajax ({
Tipo: 'POST',
url: 'more_ajax.php,
fecha: "lastmsg = '+ msg,
cache: false,
éxito: function (html) {
$ ('# Morebutton') Eliminar ().;
$ ('# More_updates') Añadir (HTML).;
}
});
return false;
});
});
</ Script>
</ Head>
<body>
<div align="center" style="width:500px;">
<? Php
include ('dbconfig.php');
$ Sql_check = mysql_query ("SELECT * FROM pedido por más msg_id DESC LIMIT 2");
while ($ fila = mysql_fetch_array ($ sql_check)) {
$ Msg_id = $ row ['msg_id'];
$ Msg = $ row ['mensaje'];
>
<Div id = "<php echo $ msg_id;?>" Class = "boxMsg">
<span style="padding:5px;"> <php echo $ mensaje;?> </ span>
</ Div>
<? Php
}
>
<div id="more_updates"> </ div>
<div id="morebutton"> <a id = "<php echo $ msg_id;?>" class = "más" href = "#"> Más información </ a> </ div>
</ Div>
</ Body>
</ HTML>
Como se puede ver después de ver los 2 primeros puestos (ordenados por "msg_id" en orden descendente), hay un div vacío con id "more_update" (que habrá "lleno" el próximo mensaje) y un div que representa la próxima enlace de "Más" para que nosotros asociamos - un método para usar jQuery - los mensajes de solicitud de acción.
Cabecera (head ...</ head>) del documento, después de llamar a la librería jQuery, que se describe la función de JavaScript asociado con el enlace "More" (esta función es llamada con el " evento de clic ).
Con esta función, tomados de la "id" del identificador de enlace ("msg_id") muestra el último mensaje, este identificador se envía al segundo archivo PHP como un parámetro después de la petición ajax , por su parte, sustituir el contenido del contenedor div enlace "More" con un hermoso gif animado con efecto de "carga" , para matar el tiempo.
Si la petición ajax tuvo éxito (el éxito de la propiedad de la aplicación) que retire todos los div "morebutton" e insertar la respuesta HTML (con mensajes de otro tipo) en el div contenedor "more_update" con la añada .
 |
ASP Cero (Ebook)
Aprendizaje de Microsoft ASP y VBScript desde cero. Con sólo 29 €. |
 |
Javascript (Curso)
Guía completa de scripting del lado del cliente. A partir de 39 €. |
 |
PHP (Curso)
Ciclo completo para la creación de sitios Web dinámicos. A partir de 49 €. |