jul 27, 2009

Enviado por en Diseño, jQuery

jQuery Contenido oculto

La idea de este tutorial es explicar como jQuery para crear una especie de Spoilers para ocultar y mostrar contenido.










Primero que nada, que es jQuery.
Tal como se puede ver en al sección F.A.Q de W00T.IN

Query es una biblioteca o framework de Javascript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web.

Para que te quiero Wikipedia  (después de todo no soy reportero)

Ahora bien primero que nada hay que agregara  nuestro documento web  jQuery para poder trabajar sobre el, hacer esto es muy sencillo basta con añadir la siguiente etiqueta en la sección head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Tambien la puedes bajar desde la pagina oficial de jQuery, pero es mejor cargarla desde una URL exterior para aumentar el paralelismo de carga, aumentando la velocidad de carga de tu pagina.

Despues de ya tener jQuery necesitamos contenido, en este caso usare 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">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="mostrar.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
</head>

<body>

<a href="#" id="1">Muestra el contenido</a><br />
		<div id="contenido1">
			<p>Esto es el contenido del primer spoiler</p>
		</div>
<a href="#" id="2">Muestra el contenido</a><br />
		<div id="contenido2">
			<p>Esto es el contenido del segundo spoiler</p>
		</div>
<a href="#" id="3">Muestra el contenido</a><br />
		<div id="contenido3">
			<p>Esto es el contenido del tercer spoiler</p>
		</div>
<a href="#" id="4">Muestra el contenido</a><br />
		<div id="contenido4">
			<p>Esto es el contenido del cuarto spoiler</p>
		</div>
<a href="#" id="5">Muestra el contenido</a><br />
		<div id="contenido5">
			<p>Una imagen :D</p>
			<img src="http://media.w00t.in/2009/06/logo.png" width="382" height="102" />
		</div>

<a href="#"id="todos">Mostrar Ocultar todos</a>
</body>
</html>

Si se fijan esta separado cada enlace con un ID unico, que corresponde al contenido que esta dentro de un DIV con un ID unico.

Ahora bien la función de mostrar/ocultar:

$(document).ready(function() {
 // Oculta todo
 $('#contenido1').hide();
  $('#contenido2').hide();
  $('#contenido3').hide();
  $('#contenido4').hide();
  $('#contenido5').hide();
 // :D
  $('a#1').click(function() {
    $('#contenido1').toggle(400);
    return false;
  });
  $('a#2').click(function() {
    $('#contenido2').toggle(400);
    return false;
  });
  $('a#3').click(function() {
    $('#contenido3').toggle(400);
    return false;
  });
  $('a#4').click(function() {
    $('#contenido4').toggle(400);
    return false;
  });
  $('a#5').click(function() {
    $('#contenido5').toggle(400);
    return false;
  });
  $('a#todos').click(function() {
    $('#contenido1').toggle(400);
    $('#contenido2').toggle(400);
    $('#contenido3').toggle(400);
    $('#contenido4').toggle(400);
    $('#contenido5').toggle(400);
    return false;
  });
});

Las lineas 1-7 corresponden a ocultar el contenido al principio.

Y las lineas 9-36 corresponden a mostrar/ocultar cuando se active el enlace con el ID especificado

También se puede añadir la función para ocultar/mostrar todos si gustan, solo tendria que ser un enlace o boton con id unico :D

Ahora bien que tenemos el javascript solo falta añadirlo, pueden guardarlo como un .js aparte o incluirlo en el HTML directamente, com ustedes prefieran.

En este caso lo guardamos como un documento aparte:

<script type="text/javascript" src="mostrar.js"></script>

Bueno sin nada mas que agregar que... lean la documentación si les intereso el tema.
Les dejo el ejemplo

    Posts Relacionados

    Dejar una respuesta

    Debes ser Alojarse para enviar un comentario.