jQuery es una asociación de funciones javascript que nos facilitan la tarea de crear una página web utilizando éste lenguaje. En el artículo de hoy os explicaremos cómo utilizar jQuery para crear una web bastante profesional sin la necesidad de códigos complejos.
El principal uso que daremos a jQuery será la paginación de la web, es decir, nos permitirá crear un sencillo menú que muestre el contenido que deseemos cuando pulsemos en alguno de sus links.
El código que utilizaremos es el siguiente:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>jQuery</title>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script> //Importamos la librería jQuery del repositorio de Google
<script>
$(document).ready(function(){
$(“#contacto”).click(function(evento){ //Función que muestra el contenido del archivo contacto.html en la zona que marquemos como destino.
evento.preventDefault();
$(“#destino”).load(“contacto.html”);
});
$(“#trabajos”).click(function(evento){ //Función que muestra el contenido del archivo trabajos.html en la zona que marquemos como destino.
evento.preventDefault();
$(“#destino”).load(“trabajos.html”);
});
$(“#destino”).load(“inicio.html”); //Carga el contenido de inicio.html en la zona de destino al cargar la web.
})
</script>
</head>
<body>
<center><a href=”#contacto” id=”contacto”>Contacto</a> | <a href=”#trabajos”>Trabajos</a></center> //Crea el menu
<div></div> //Crea la zona de destino
</body>
</html>
Este es el código básico que nos permitirá distribuir el contenido en nuestra página web, sin embargo, si le a esto le añadimos un bonito diseño conseguiremos resultados tan profesionales como el siguiente: