Foros del Web » Programando para Internet » Jquery »

Mootools toggle en jQuery

Estas en el tema de Mootools toggle en jQuery en el foro de Jquery en Foros del Web. Hola, foreros: Donde puedo encontrar algun script como este: http://www.solutoire.com/experiments...0/htr_ex2.html pero realizado en jQuery. Tengo alguno parecido, pero queria que el boton se desplazase hacia ...
  #1 (permalink)  
Antiguo 24/02/2008, 18:16
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.567
Antigüedad: 12 años, 9 meses
Puntos: 19
Sonrisa Mootools toggle en jQuery

Hola, foreros:

Donde puedo encontrar algun script como este: http://www.solutoire.com/experiments...0/htr_ex2.html

pero realizado en jQuery. Tengo alguno parecido, pero queria que el boton se desplazase hacia abajo cuando se clica en el.

¿Sabeis?
  #2 (permalink)  
Antiguo 25/02/2008, 02:07
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 15 años, 10 meses
Puntos: 62
Re: Mootools toggle en jQuery

como yo soy de jquery tal vez esto te sirva:

http://zital.no-ip.org/jquery/

;)
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #3 (permalink)  
Antiguo 25/02/2008, 10:42
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.567
Antigüedad: 12 años, 9 meses
Puntos: 19
Re: Mootools toggle en jQuery

Hola, Zital:

Me gusta un monton, ahora como lo descargo?
  #4 (permalink)  
Antiguo 25/02/2008, 12:03
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 15 años, 10 meses
Puntos: 62
Re: Mootools toggle en jQuery

Código:
var http='http://zital.no-ip.org/jquery/';
$(document).ready(function (){  
    $("#close").click(function(){
	$("#top").slideUp("fast", function(){
		$("#container").slideUp("fast");
	});
    });    
    $("#toggle").click(function(){
    var img=document.getElementById('toggle');
    if(img.src==http+"img/down.png")
     {
      $("#top").slideDown("fast", function(){
	img.src="img/up.png";
	img.alt="up";
      });
     }
    else
     {
      $("#top").slideUp("fast", function(){
	img.src="img/down.png";
	img.alt="down";
      });     
     }
    });        
    setTimeout ('$("#container").slideDown("fast")',1500);
});
este es el js

jquery lo puedes descargar desde su pagina oficial, eso si, uso un compresor javascript escrito en php por si no tienes el mod_deflate de apache, tal vez te sirva:

Código PHP:
<?php  
  ob_start
'ob_gzhandler' );
  echo 
join('',file($_GET['file']));
  
ob_end_flush();
?>
le pasas por $_GET la url del js y listo, espero que te sirva ;)
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #5 (permalink)  
Antiguo 25/02/2008, 12:26
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.567
Antigüedad: 12 años, 9 meses
Puntos: 19
Re: Mootools toggle en jQuery

Hola de nuevo Zital:

He intentado pegar los codigos pero no hay forma de que lo haga bien, soy bastante novato con jquery.

¿Podrias darme un link de descarga del ejemplo?
  #6 (permalink)  
Antiguo 25/02/2008, 15:22
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 15 años, 10 meses
Puntos: 62
Re: Mootools toggle en jQuery

Mañana por la manaña te lo documento, empaqueto para descarga.
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #7 (permalink)  
Antiguo 26/02/2008, 02:36
Avatar de ZiTAL  
Fecha de Ingreso: marzo-2004
Ubicación: Bermio (Bizkaia)
Mensajes: 1.545
Antigüedad: 15 años, 10 meses
Puntos: 62
De acuerdo Re: Mootools toggle en jQuery

Estructura de archivos:
Código:
css
|->style.css

img
|->down.png
|->up.png
|->fileclose.png

js
|->general.js
|->jquery.js

index.php
js.php // compresor javascript
style.css
Código PHP:
body
 
{
     
margin:0px;
     
padding0px;
     
background-color#ffffff;
 
}
 
#top
  
{
      
border1px solid #000000;
      
widthauto;
      
background-color#e2e2e2;
      
margin-leftauto;
      
margin-rightauto;
      
displaynone/* por defecto sale oculto */
  
}
 
#container
  
{
      
padding5px;
      
border1px solid black;
      
width80%;
      
margin-leftauto;
      
margin-rightauto;
      
displaynone/* por defecto sale oculto */
  
}
  
#controls
   
{
       
border1px solid black;
       
padding5px;
   } 
index.php
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery example!!</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js.php?file=js/jquery.js"><!-- javascript comprimido por php: gzip -->
</script>
<script type="text/javascript" src="js.php?file=js/general.js"><!-- javascript comprimido por php: gzip -->
</script>
</head>
<body>
<div id="container">
	<div id="top">
		Contenido de 'top'<br />
		;)
	</div>
	<div id="controls">
		<img id="close" src="img/fileclose.png" alt="file close"/>
		<img id="toggle" src="img/down.png" alt="down" />
	</div>
</div>
<!-- Preload images -->
<div style="display:none;">
	<img src="img/up.png" alt="up" />
</div>
</body>
</html> 
js.php
Código PHP:
<?php  
  ob_start
'ob_gzhandler' );
  echo 
join('',file($_GET['file']));
  
ob_end_flush();
?>
general.js
Código:
var http='http://zital.no-ip.org/jquery/'; // cambiar por la ruta completa de tuy web
// cuando termine de cargar la pagina se activan las siguientes funciones
$(document).ready(function (){  
    $("#close").click(function(){ //cuando pulsamos la X
	$("#top").slideUp("fast", function(){ // primero se oculta la capa TOP (capa hija)
		$("#container").slideUp("fast"); // por ultimo se oculta la capa CONTAINER (capa padre)
	});
    });    
    $("#toggle").click(function(){ // cuando pulsamos sobre la flecha
    var img=document.getElementById('toggle');
    if(img.src==http+"img/down.png") // si la flecha es abajo
     {
      $("#top").slideDown("fast", function(){ // mostramos la capa TOP
	img.src="img/up.png"; // y despues cambiamos la imagen por la flecha arriba y cambiamos el ALT
	img.alt="up";
      });
     }
    else // si la flecha no es abajo, sera arriba ;)
     {
      $("#top").slideUp("fast", function(){ // mostramos la capa TOP
	img.src="img/down.png"; // y despues cambiamos la imagen por la flecha abajo y cambiamos el ALT
	img.alt="down";
      });     
     }
    });        
    setTimeout ('$("#container").slideDown("fast")',1500); // mostramos la capa CONTAINER despues de 1,5 segundos de cargar la pagina
});
Aqui todo empaquetado:
http://zital.no-ip.org/jquery/jquery.tar.bz2
__________________
http://zital.no-ip.org
____________________

Euskerie ahuen eta bijotzan
  #8 (permalink)  
Antiguo 26/02/2008, 04:15
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.567
Antigüedad: 12 años, 9 meses
Puntos: 19
Re: Mootools toggle en jQuery

Hola...

Muchisimas gracias, esto es un foreros en toda regla... menudo trabajo...

Muchas gracias...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 23:11.