Scrolling – jQuery | WebMatrix
En artículos pasados hemos estado viendo nuevas funcionalidades del lenguaje HTML5 , esta vez veremos un poco de la integración de jQuery, veremos como crear un efecto scroll horizontal para una aplicación web, es decir, permitiremos al usuario que se desplace de manera horizontal a través de nuestra aplicación web. Para poder lograr esta tarea haremos uso de jQuery y HTML 5 en nuestro entorno de desarrollo WebMatrix, además implementaremos la funcionalidad necesaria para que en dispositivos móviles funcione sin barra de navegación. Veamos una breve introducción…
¿Qué es jQuery?
En términos generales jQuery es una librería de JavaScript rápida y concisa que simplifica la ejecución de un documento HTML, manejo de eventos, animación, y las interacciones Ajax para el desarrollo web ágil. jQuery está diseñado para cambiar la forma en que escribes JavaScript.
jQuery es una librería de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.
jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU, permitiendo su uso en proyectos libres y privativos.jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.
Microsoft y Nokia anunciaron que incluirán la biblioteca en sus plataformas(mas tarde veremos características de Windows 8). Microsoft la añadirá en su IDE Visual Studio y la usará junto con los frameworks ASP.NET AJAX y ASP.NET MVC, mientras que Nokia los integrará con su plataforma Web Run-Time.
¿Cómo funciona?
Para poder implementar alguna funcionalidad(slider, galería, video, parallax, etc) de jQuery en nuestra apclicacion web, es necesario aceeder a la página de jQuery y descargar su última versión. Una vez descargado, debemos incluirlo en el directorio de nuestra aplicación web y por último incluirlo en nuestro archivo .HTML que deseemos implementar la funcionalidad:
<html>
<head>
<script src=”jquery-1.3.2.min.js” type=”text/javascript”></script>
</head>
<body>
<a href=”http://www.desarrolloweb.com/”>DesarrolloWeb.com</a>
</body>
</html>
Una vez realizados estos pasos estamos listos para usar jQuery en nuestra aplicación web, solo nos resta crear la funcionalidad entre las etiquetas <head></head> insertando nuestro código JavaScript.
Algunas características de jQuery:
- Selección de elementos DOM.
- Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
- Eventos.
- Manipulación de la hoja de estilos CSS.
- Efectos y animaciones.
- Animaciones personalizadas.
- AJAX.
- Soporta extensiones.
- Utilidades varias como obtener información del navegador, operar con objetos y vectores, funciones para rutinas comunes, etc.
- Compatible con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+.
Ahora veamos el ejemplo:
Crearemos un nuevo proyecto en WebMatrix y añadiremos un archivo nuevo .HTML en el cual crearemos un menú principal que funcionará como ancla:
<ul> <li> <a href="#Inicio"><img src="images/Logo.png" alt="logo" class="logo"/></a> </li> <li> <a href="#training1"><img src="images/icon.png" alt="logo html5" class="logo2" /></a> </li> <li> <a href="#training2">Training 2</a> </li> <li> <a href="#training3">Training3</a> </li> </ul>
Luego de esto crearemos un contenedor para cada elemento que tengamos en nuestra lista, en este caso crearemos 4, cada uno contendrá su id correspondiente, es decir, si en la lista lo nombramos #training2, su id deberá ser el mismo:
<div id="Inicio" class="control"> <h2> Inicio </h2> <img src="images/HTML1.jpg" alt="img2"/> </div> <div id="training1" class="control"> <h2> Training1 </h2> <img src="images/HTML2.jpg" alt="img2"/> </div> <div id="training2" class="control"> <h2> Training2 </h2> <img src="images/HTML3.jpg" alt="img2"/> </div> <div id="training3" class="control"> <h2> Training3 </h2> <img src="images/Social3.jpg" alt="img2"/> </div>
Ya por último importaremos la librería de jQuery y le daremos la funcionalidad de nuestro scroll horizontal con una pequeña animación :
<script src="js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#banner a").bind("click",function(event){
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 500);
});
});
</script>
Pueden cambiar el tiempo que tarda en cambiar de un contenedor a otro en la línea siguiente:
scrollTop: $(target).offset().top},500);
Con este pequeño ejemplo podemos ver lo sencillo que es utilizar jQuery en nuestras aplicaciones web, y la gran funcionalidad que nos puede aportar para efectos de navegación dando una mejor experiencia al usuario y permitiéndonos manejar varios tipos de eventos de manera muy simple. Aquí esta el demo para su descarga en gitHub y en la página de recursos.
David Rendón.
Follow @daverndnRelated articles
- Getting Started With jQuery – The DOM (i-programmer.info)
- Get Ready To Load Different Versions Of jQuery (css.dzone.com)
- Beginner’s Guide to jQuery (teamtreehouse.com)
Comunidad
Colaborando con
