Micaela 9 de diciembre de 2009 a las 11.55
   Imprimir artículo
elWebmaster.com

“Ver más” al estilo Twitter con jQuery y Ajax


twitter-ver-masTwitter y Facebook están utilizando las mismas técnicas para cargar tweets y actualizaciones anteriores. El sistema muestra de forma predeterminada la información que es nueva y ofrece el botón “más” o “more”. Al cliquear sobre el botón, la información anterior (antiguos tweets, actividad de usuario) se despliega en pantalla.

En este tutorial, les mostramos una forma muy sencilla y fácil de lograr un efecto similar en tu propia web.

Primero hay que crear una tabla de base de datos:

  1. CREATE TABLE messages(
  2. msg_id INT AUTO_INCREMENT PRIMARY KEY,
  3. message TEXT
  4. );

Ahora el código JavaScript:

Contiene código JavaScript.

$(‘.more’).live(“click”,function(){}more es el nombre de clase de anchor más el botón. Utilizando la llamada $(this).attr(“id”) más el botón se muestra el ultimo mensaje del valor del campo ID.

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
  2. libs/jquery/1.3.0/jquery.min.js"></script>
  3. <script type="text/javascript">
  4. $(function()
  5. {
  6. $('.more').live("click",function()
  7. {
  8. var ID = $(this).attr("id");
  9. if(ID)
  10. {
  11. $("#more"+ID).html('<img src="moreajax.gif" />');
  12.  
  13. $.ajax({
  14. type: "POST",
  15. url: "ajax_more.php",
  16. data: "lastmsg="+ ID,
  17. cache: false,
  18. success: function(html){
  19. $("ol#updates").append(html);
  20. $("#more"+ID).remove(); // removing old more button
  21. }
  22. });
  23. }
  24. else
  25. {
  26. $(".morebox").html('The End');// no results
  27. }
  28.  
  29. return false;
  30. });
  31. });
  32. </script>

loadmore.php

Contiene simple código PHP. Mostrando los resultados de la tabla de mensajes en orden descendiente.

  1. <div id='container'>
  2. <ol class="timeline" id="updates">
  3.  
  4. <?php
  5. include('config.php');
  6. $sql=mysql_query("select * from messages ORDER BY msg_id DESC LIMIT 9");
  7. while($row=mysql_fetch_array($sql))
  8. {
  9. $msg_id=$row&#91;'msg_id'];
  10. $message=$row&#91;'message'];
  11. ?>
  12. <li>
  13. <?php echo $message; ?>
  14. </li>
  15. <?php } ?>
  16. </ol>
  17.  
  18. //More Button here $msg_id values is a last message id value.
  19. <div id="more<?php echo $msg_id; ?>" class="morebox">
  20. <a href="#" class="more" id="<?php echo $msg_id; ?>">more</a>
  21. </div>
  22.  
  23. </div&gt;&#91;/php]
  24. <h2>ajax_more.php</h2>
  25. Contiene código PHP. Mostrando el registro de la tabla de mensajes, donde  msg_id es menor al id del último mensaje.
  26. [php]<?php
  27. include("config.php");
  28. if(isSet($_POST&#91;'lastmsg']))
  29. {
  30. $lastmsg=$_POST&#91;'lastmsg'];
  31. $lastmsg=mysql_real_escape_string($lastmsg);
  32. $result=mysql_query("select * from messages where msg_id<'$lastmsg' order by msg_id desc limit 9");
  33. while($row=mysql_fetch_array($result))
  34. {
  35. $msg_id=$row&#91;'msg_id'];
  36. $message=$row&#91;'message'];
  37. ?>
  38. <li>
  39. <?php echo $message; ?>
  40. </li>
  41. <?php
  42. }
  43. ?>
  44.  
  45. //More Button here $msg_id values is a last message id value.
  46. <div id="more<?php echo $msg_id; ?>" class="morebox">
  47. <a href="#" id="<?php echo $msg_id; ?>" class="more">more</a>
  48. </div>
  49. <?php
  50. }
  51. ?>

Código CSS

  1. *{ margin:0px; padding:0px }
  2. ol.timeline
  3. {
  4. list-style:none
  5. }
  6. ol.timeline li
  7. {
  8. position:relative;
  9. border-bottom:1px #dedede dashed;
  10. padding:8px;
  11. }
  12. .morebox
  13. {
  14. font-weight:bold;
  15. color:#333333;
  16. text-align:center;
  17. border:solid 1px #333333;
  18. padding:8px;
  19. margin-top:8px;
  20. margin-bottom:8px;
  21. -moz-border-radius: 6px;
  22. -webkit-border-radius: 6px;
  23. }
  24. .morebox a{ color:#333333; text-decoration:none}
  25. .morebox a:hover{ color:#333333; text-decoration:none}
  26. #container{margin-left:60px; width:580px }

Para ver un demo hagan clic aquí »

Para descargar el script hagan clic aquí »

Fuente: 9 lessons


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (8)

  1. Sin tiempo para escribir.40, Carrero dice:

    […] “Ver más” al estilo Twitter con jQuery y Ajax. vía: elwebmaster […]

  2. Santiago dice:

    Hola, muy buen articulo… tengo un aduda:

    Como se podria hacer para no perder el SEO, es decir, que los buscadores accedan a los demas resultados a los que nosotros accedemos haciendo click en el boton “more” (accediendo mediante ajax) ?

    Muchas gracias.

  3. Daniela dice:

    @Santiago: Hay dos posibilidades: una es que el link que usamos para disparar el ajax tenga un href que apunte a una página con la información completa, de manera que si el crawler llega a ese link (como no interpreta javascript) directamente pase a indexar la página con el texto completo. La otra posiblidad sería que la página contenga todo el texto, y recién después de cargada se oculte el “sobrante” y se inserte el link de “leer más”, cuya única función sería la de “des-ocultar” el texto oculto :)

    Algo así se hace en: http://www.viajeros.com/alojamiento/hoteles/westshore-hotel-amp-conference-center

  4. Juan N dice:

    (se que este post es del año pasado, pero justo lo encuentro ahora que lo necesito) tengo una duda, ese escript corre en todos los navegadores?

  5. Juan N dice:

    bueno acabo de probar el codigo hasta instale un progrma para ver “en diferentes versiones del explorer” resulta que tuve que modificaar la etiqueta “” y ponerla como “” y quitar los “” y me funciona perfect :) en las versiones del explorer 6,7 (es que ando paranoico probando en versiones anteriores de ese explorardor, aunke parezca mentira aun hay personas que lo usan) espero que les sea util el tip

  6. Gabriel Emiliano dice:

    Grasias lo voy a probar y revisar necesito un código de ese estilo

  7. franc dice:

    tengo una duda, se que el post es algo viejo .
    como puedo pasar mas variables por el javascript?
    por que pasa la variable del id del boton , pero como se pueden poner mas?

  8. luis dice:

    excelente justo lo q andaba buscando.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder