Comunidad PHPeros
Lenguajes => JavaScript => Mensaje iniciado por: RumbaStereo en 06 de Agosto de 2012, 18:02:19 pm
-
Buenas a todos.
Eh estado adentrándome un poco al mundo de javascript ya que es una forma de mostrar tus proyectos de una forma mas dinamica y atrayente al usuario, les explicare mi problema:
Eh creado una función llamada oprimir(); que realiza dos animaciones que sale un div y entra otro por ambos lados.
Explico el Procedimiento: Tengo una Ventana que abre de forma o estilo LightBox; que contiene un DIV con informacion y un menu, Cuando alguien da click en dicho boton, El Div que muestra, Corre Hacia el Lado izquierdo (LEFT: -1500px;) y aparece el div que es el boton e informacion que el usuario quiere que muestre por el lado derecho (RIGHT:1500px;)
Aqui no es el Problema, el Problema es que son 5 Botones y quiero minimixar el codigo, no haciendo una funcion para cada boton, sino que una sola funcion llame Todas las DIVS o ventanas correspondientes.
Eh intentado, Dependiendo de la ID de cada boton y depende a esta la funcion la llame pero no me funciona, estoy utilizando HTML y no se si ustedes podrian ayudarme a corregir o a la vez explicarme como realizarlo.
AQUI DEJO LA FUNCION:
function oprimir() {
$('#sale').animate( { left: '-=1500px' }, 1000 );
$('#entra').animate( { right: '+=1860px' }, 1000 );
}
Saludos y Gracias.
-
Utiliza una clase en vez de un id para los divs, y utiliza el event.target para acceder al botón clickado, y obtener su id/name/lo-que-sea para relacionarlo, algo así:
$('botones').click(function(e) { // e recoge el event;
$('#capadelosdivs > div.'+e.target.name).animate(...)
});
-
$('botones').click(function(e) { // e recoge el event;
$('#capadelosdivs > div.'+e.target.name).animate(...)
});
Eh entendido un poco, pero esto significa que me tocara Añadirle a cada una de las DIVS y a cada uno de los Botones el mismo Valor ? Ejemplo Boton INICIO id="home" DIV INICIO id="inicio" ?
-
$('botones').click(function(e) { // e recoge el event;
$('#capadelosdivs > div.'+e.target.name).animate(...)
});
Eh entendido un poco, pero esto significa que me tocara Añadirle a cada una de las DIVS y a cada uno de los Botones el mismo Valor ? Ejemplo Boton INICIO id="home" DIV INICIO id="inicio" ?
Algo así.
-
Pues yo he hecho algo así para que lo modifiques cambiando los "button" por el div o elemento que quieres que sea el "botón" y puedes ir lo modificando para adaptarlo a tu sitio web.
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.8.0.min.js"></script>
</head>
<body>
<button id="b1" class="bot">Botón 1</button>
<button id="b2" class="bot">Botón 2</button>
<button id="b3" class="bot">Botón 3</button>
<button id="b4" class="bot">Botón 4</button>
<button id="b5" class="bot">Botón 5</button>
<script>
function oprimir(id) {
switch(id) {
case "b1":
//* Acción a realizar con el botón 1 *//
break;
case "b2":
//* Acción a realizar con el botón 2 *//
break;
case "b3":
//* Acción a realizar con el botón 3 *//
break;
case "b4":
//* Acción a realizar con el botón 4 *//
break;
case "b5":
//* Acción a realizar con el botón 5 *//
break;
}
}
$(".bot").click(function (){
var id = $(this).attr("id");
oprimir(id);
});
</script>
</body>
</html>
Suerte, y espero que te funcione.