Mootools toggle en jQuery

salbatore · #1 (**permalink**) 24/02/2008, 18:16

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?

ZiTAL · #2 (**permalink**) 25/02/2008, 02:07

como yo soy de jquery tal vez esto te sirva:

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

;)

salbatore · #3 (**permalink**) 25/02/2008, 10:42

Hola, Zital:

Me gusta un monton, ahora como lo descargo?

ZiTAL · #4 (**permalink**) 25/02/2008, 12:03

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 ;)

salbatore · #5 (**permalink**) 25/02/2008, 12:26

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?

ZiTAL · #6 (**permalink**) 25/02/2008, 15:22

Mañana por la manaña te lo documento, empaqueto para descarga.

ZiTAL · #7 (**permalink**) 26/02/2008, 02:36

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;
     padding: 0px;
     background-color: #ffffff;
 }
 #top
  {
      border: 1px solid #000000;
      width: auto;
      background-color: #e2e2e2;
      margin-left: auto;
      margin-right: auto;
      display: none; /* por defecto sale oculto */
  }
 #container
  {
      padding: 5px;
      border: 1px solid black;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      display: none; /* por defecto sale oculto */
  }
  #controls
   {
       border: 1px solid black;
       padding: 5px;
   }

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

salbatore · #8 (**permalink**) 26/02/2008, 04:15

Hola...

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

Muchas gracias...