Aprende a ser un Desarrollador Web.
JavaScript
Mostrar y Ocultar DIVs con jQuery
2 Ago
Mostrar y Ocultar DIVs con Jquery
Hola Amigos.
Casi terminando el Domingo, espero que les halla gustado los Wallpapers que les deje, pero ahora vamos a darle un poco de efecto a nuestro Tutorial: Mostrar y Ocultar DIVs con Javascript. Vamos a utilizar uno de los mas Famosos Framework para JavaScript: jQuery.
Bueno basta de escribir y vamos al grano, primero les dejo el Codigo HTML del ejemplo anterior (sin efectos):
function capa1(){
document.getElementById('capa1').style.display = 'block';
document.getElementById('capa2').style.display = 'none';
document.getElementById('capa3').style.display = 'none';
}
function capa2(){
document.getElementById('capa2').style.display = 'block';
document.getElementById('capa1').style.display = 'none';
document.getElementById('capa3').style.display = 'none';
}
function capa3(){
document.getElementById('capa3').style.display = 'block';
document.getElementById('capa1').style.display = 'none';
document.getElementById('capa2').style.display = 'none';
}
Mostrar y Ocultar DIVs con Javascript
- Capa 1
- Capa 2
- Capa 3
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
* Enlace
* Enlace
* Enlace
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Lo primero que haremos sera Agregar el Archivo de jQuery, tenemos dos formas de hacerlo:
1 – La mas sencilla, agregar este codigo a nuestro HTML:
2 – La otra manera, es descargando el Archivo y subirlo a nuestro Servidor:
Una vez agregado esta linea a nuestro Codigo ya tenemos instalado jQuery.
Lo primero que modificaremos son nuestros Links para mostrar u Ocultar los Divs:
- Capa 1
- Capa 2
- Capa 3
Como ven hemos eliminado los parametros “Onclick” y agregamos un “id” a cada uno (Cada ID debe ser unico).
Ahora cambiemos nuestro codigo JavaScript para que usemos las Funcionalidades de jQuery:
$(document).ready(function(){
$("#click1").click(function(){
$("#capa1").show("slow");
$("#capa2").hide("slow");
$("#capa3").hide("slow");
});
$("#click2").click(function(){
$("#capa2").show("slow");
$("#capa1").hide("slow");
$("#capa3").hide("slow");
});
$("#click3").click(function(){
$("#capa3").show("slow");
$("#capa2").hide("slow");
$("#capa1").hide("slow");
});
});
Acuerdensen que deben borrar el Codigo JavaScript anterior:
function capa1(){
document.getElementById('capa1').style.display = 'block';
document.getElementById('capa2').style.display = 'none';
document.getElementById('capa3').style.display = 'none';
}
function capa2(){
document.getElementById('capa2').style.display = 'block';
document.getElementById('capa1').style.display = 'none';
document.getElementById('capa3').style.display = 'none';
}
function capa3(){
document.getElementById('capa3').style.display = 'block';
document.getElementById('capa1').style.display = 'none';
document.getElementById('capa2').style.display = 'none';
}
Todo este codigo hay que eliminarlo ya que no nos servira.
Una vez ya hecho estos cambios tenemos el Resultado con Efectos Listo, pero antes les voy a pasar a explicar un poco las funciones de jQuery:
$(document).ready(function(){
Esta funcion se encarga de cargar todas las funciones creadas con jQuery para cuando el documento ya este listo para poder usarse.
$("#click1").click(function(){
Aqui definimos que al elemento con id, “click1″ tenga una funcion al hacer clic sobre el. y Todo el codigo que se encuentre entre las llaves sera lo que se ejecutara al hacer click sobre ese elemento.
$("#capa1").show("slow");
$("#capa2").hide("slow");
Casi muy facil de entender, solo mostramos (show) y ocultamos (hide) el elemento con id que le pasemos.
Ya es hora de mostrarle como ha quedado nuestro Ejemplo.
Les deseo mucha suerte y que cualquier duda que surge, no se la guarden que tienen el Foro para que yo los pueda ayudar con lo que sea!
Saludos…
Maty!
Mostrar y Ocultar DIVs con JavaScript
28 Jul
Mostrar y Ocultar DIVs con JavaScript
Buenas!
Aqui un pequeño tutorial para darle un poco de efectos dinamicos a nuestro sitio web o Blog.
En Codigo Geek podran ver un claro ejemplo de lo que se puede lograr con este simple tutorial y obvio dandole un lindo estilo y diseño.
Y Aqui nuestro Ejemplo, tengan en cuenta que solo es para mostrar el funcionamiento de JavaScript despues ustedes pueden darle el estilo que quieran!
Bueno comencemos con el Codigo, primero crearemos nuestro Codigo HTML:
index.html
Mostrar y Ocultar DIVs con Javascript - www.matydesign.com
Mostrar y Ocultar DIVs con Javascript
- Capa 1
- Capa 2
- Capa 3
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
* Enlace
* Enlace
* Enlace
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Bueno como ven muy sencillo, primero creamos una Lista la que actuara para mostrar los DIVs. Despues creamos 3 DIVs con el contenido que queramos, tengan en cuenta que son DIVs comunes y pueden agregar lo que se les antoje 
.
Nota: Es muy importante que los DIVs tengan cada uno un ID unico.
Ahora le daremos un poco de estilo:
estilo.css
li {
color:#fff;
display:block;
width:100px;
padding:5px;
background:#999;
font-weight:bold;
}
li:hover {
color:#000;
}
.capa1 {
background:#999;
display:none;
}
.capa2 {
background:#333;
color:#fff;
display:none;
}
.capa3 {
background:#000;
color:green;
display:none;
}
Ya que tenemos todos los DIVs y todo el diseño ya creado, vamos a crear las funciones en JavaScript para que podamos mostrar y ocultar los DIVs.
function capa1(){
document.getElementById('capa1').style.display = 'block';
document.getElementById('capa2').style.display = 'none';
document.getElementById('capa3').style.display = 'none';
}
function capa2(){
document.getElementById('capa2').style.display = 'block';
document.getElementById('capa1').style.display = 'none';
document.getElementById('capa3').style.display = 'none';
}
function capa3(){
document.getElementById('capa3').style.display = 'block';
document.getElementById('capa1').style.display = 'none';
document.getElementById('capa2').style.display = 'none';
}
Esto es muy sencillo creamos 3 funciones, una para cada DIV, cada funcion muestra el DIV y oculta los demas (si alguno estuviera visible). Pasamos a explicar como funciona, la funcion getElementById(‘id_del_div’) retorna el elemento con la ID que le especifiquemos, asi que dentro de los parentesis tenemos que ingresar el ID de uno de nuestros DIVs, y la parte de: .style.display le estamos asignando nuevos valores al estilo del DIV que seleccinamos. Con none ocultaremos el div y con block lo mostrara.
Ahora lo unico que nos queda por hacer es que cuando se haga clic sobre cada enlace (o en nuestro caso, en cada item de la lista) que este muestre el DIV correspondiente. Para esto le pasaremos la funcion a cada item de la Lista de esta manera:
Asi de sencillo. Ya tenemos nuestro ejemplo terminado, asi que les dejo el codigo completo acontinuacion:
Mostrar y Ocultar DIVs con Javascript - www.matydesign.com
function capa1(){
document.getElementById('capa1').style.display = 'block';
document.getElementById('capa2').style.display = 'none';
document.getElementById('capa3').style.display = 'none';
}
function capa2(){
document.getElementById('capa2').style.display = 'block';
document.getElementById('capa1').style.display = 'none';
document.getElementById('capa3').style.display = 'none';
}
function capa3(){
document.getElementById('capa3').style.display = 'block';
document.getElementById('capa1').style.display = 'none';
document.getElementById('capa2').style.display = 'none';
}
Mostrar y Ocultar DIVs con Javascript
- Capa 1
- Capa 2
- Capa 3
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
* Enlace
* Enlace
* Enlace
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Espero que les halla gustado y que puedan implementarlo en su Blog o Web ya que puede darle mucho estilo, ademas de poder utilizar este metodo para ahorrar espacio, entre otras cosas.
Ejemplo: Demo!
Saludos…
Maty!
