mo Demo Descarga Como es sabido jQuery es un framework de desarrollo que nos permite usar JavaScript en nuestro documento HTML. Ahora va...
mo
Como es sabido jQuery es un framework de desarrollo que nos permite usar JavaScript en nuestro documento HTML. Ahora vamos a construir un menú de navegación sencillo con las características básicas de jQuery.
Antes de que podamos comenzar, necesitamos incluir la última biblioteca de jQuery. Podemos descargarla desde la sección de descargas en Descargando jQuery, luego la guardaremos en nuestra carpeta JavaScript llamada js, en la raíz de nuestro documento HTML, por ejemplo, miscapu. Si tienes problemas para entender esta parte, te recomiendo ir a la parte final de este artículo y hacer la descarga del código completo.
Manos al código!
Ahora, podemos empezar a codificar nuestra página "menu_simple.html" y la colocaremos en la carpeta "miscapu".Ahora, vamos a explicar lo que haremos a continuación:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menú Simple Usando jQuery</title>
</head>
<body>
<ul id="navigation">
<li id="home"><a href="#">Home</a></li>
<li class="active"><a href="#">Nuestros Libros</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Blog</a></li>
</ul>
<div id="placeHolder">
Este es Nuestro Primer Proyecto
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#navigation li a') .each(function() {
var $item = $(this);
$item.on('click', function(event){
event.preventDefault();
var title = $item.html();
var html = title + ' Fué Seleccionado.'
$('#placeHolder').html(html);
});
});
});
</script>
</body>
</html>
Ahora, vamos a explicar lo que hemos hecho en el fragmento de código anterior:
- Primero que nada la idea principal de nuestro script es encontrar cada hiperenlace "<a>" en el documento, evitando su funcionalidad por defecto y a cambio debe mostrar el contenido del hipervínculo en nuestro elemento placeHolder.
- Desde el principio, comenzamos con doctype y el diseño HTML principal.
- El cuerpo de la página contiene un elemento #navigation y un elemento #placeHolder para el contenido dinámico.
- La parte más importante para la funcionalidad jQuery es incluir nuestra biblioteca jQuery: Vamos a colocarla antes de la etiqueta de cierre <body>. Esto permitirá que el HTML de la página se cargue primero.
El signo del dólar $ () representa un alias para la función de fábrica de jQuery (). Dentro de esta función podemos utilizar todos los selectores CSS como ID, clase o nombres de etiqueta exactos. Por ejemplo:
- $ ( 'a'): Selecciona todos los hipervínculos de nuestro documento.
- $ ( '# myID'): Selecciona el elemento con este ID.
- $ ( '. myID'): Selecciona todos los elementos con esta clase (class).
En nuestro caso, estamos seleccionando todos los hipervínculos en el "navigation <div>" y luego definiendo su propia funcionalidad con un controlador de eventos para eventos de clic:
$item.on('click',function(event){
// evita la funcionalidad por defecto del hipervínculo <a>
event.preventDefault();
});
Y como último paso de nuestro ejemplo, creamos el "var title" y la cadena HTML, que va al placeHolder:
var title = $(this).html;<br />
var html = title + ' fué seleccionado.';
$('#placeholder').html(html);
El ejemplo anterior es realmente simple. Pero hay mucho más que jQuery puede ofrecer para nosotros. Esto incluye selectores especiales, efectos fantásticos, manipulación DOM o la no menos conocida funcionalidad AJAX. En este menú creado por ejemplo podríamos especificar nuestros eventos para movimientos del mouse sustituyendo una parte código por el evento que nos parezca más interezante!, veamos como hacer esto:
- 1er Paso: Conoceremos los eventos que podríamos usar aquí en este ejemplo:
- dblclick: Conecta/activa el evento de doble clic.
- mouseover: Ejecutar la acción proyectada JavaScript al mover el puntero del ratón sobre una imagen ó un elemento html.
- Los eventos son muchos pero realizando estos dos ustedes tendrán una idea de como intentar con los demás, les dejo un link donde encontraran más eventos: Eventos jQuery
- 2o paso: Modificamos el método on (), el cual asigna uno o más controladores de eventos para los elementos seleccionados y los elementos secundarios. Entonces procedemos a la modificación y posterior realización del efecto:
COMMENTS