Hook.js es una pequeña biblioteca para incorporar a nuestros proyectos la capacidad de refrescar el contenido mediante la acción de arrastrar y soltar, algo muy similar a lo que hacemos en aplicaciones móviles como por ejemplo la de Twitter.
Este proyecto esta pensado para puro y exclusivo uso web, por lo que vamos a arrastrar es el contenido completo de nuestro sitio empleando para ello la barra de desplazamiento del navegador que al llegar al encabezado del sitio nos mostrara la clásica barra adicional con su respectivo cargando, para finalmente actualizar el sitio de forma automática.
En la captura de pantalla que inserto a continuación se puede ver perfectamente la barra que recarga el contenido del sitio.
Ejemplo de uso:
Agregamos las bibliotecas y hojas de estilo necesarias:
<script src="jquery-latest.js" type="text/javascript"></script> <link rel="stylesheet" href="hook/hook.css" type="text/css" /> <script src="hook/hook.js" type="text/javascript"></script>
HTML:
<div id="hook"> <div id="loader"> <div class="spinner"></div> </div> <span id="hook-text">Reloading...</span> </div>
Este proyecto no tiene ninguna ciencia, su instalación es muy sencilla y el resultado muy bueno. Aunque honestamente me gustaría que el refresco del sitio se realice de forma dinámica y no completa como lo hace hasta ahora, algo que perfectamente se puede lograr modificando el plugin.
Web: Hook.js