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