Infoweb S.A.: Una ventana que se esconde

miércoles, 27 de julio de 2011

Una ventana que se esconde

Como les he venido contando he estado actualizando un sitio y le he puesto componentes interesantes con jquery, hoy voy a mostrarles como puse unos div que se escondan para que tenga mayor espacio en el escritorio:

<html>
<head>
<title>Div que se esconde</title>
<script type="text/javascript" src="jq/jquery.js">
<!-- La libreria de jquery, yo la tengo en el directorio jq --!>
<script type="text/javascript">
$(function(){
$("#mostrar").click(function(event) {
event.preventDefault();
$("#caja").slideToggle();
});
<!-- la función o evento para mostrar el div cuando esta oculto --!>
$("#caja a").click(function(event) {
event.preventDefault();
$("#caja").slideUp();
});
<!-- la función o evento para ocultar el div cuando esta mostrado --!>
});
</script>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}
<!-- Los estilos que no son del todo necesarios, pero ayudan a verse bonito --!>
a{color:#993300; text-decoration:none;}
#caja {
width:70%;
display: none;
padding:5px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
}
</style>
</head>
<body>
<el link que muestra o esconde
<a href="#" id="mostrar">MOSTRAR</a>
<div id="caja">
<!-- el div que va a mostrar los datos --!>
<a href="#" class="close">[x]</a>
<p>El dato que muestra o foto<p>
</div>
</body>
</html>

Realmente se pueden hacer cosas muy muy bonitas, más combinando css y jquery con html, pero para mi uso este sencillo ejemplo me ayudo mucho.

Saludos

Buscar este blog

miércoles, 27 de julio de 2011

Una ventana que se esconde

No hay comentarios:

Publicar un comentario