0
Elementos dinamicos con jQuery
¿Un sitio web o un blog más dinámica?
Es necesario darle control al usuario. Control como el hecho de decidir que elementos quiere ver y cuales no y se lo podemos otorgar gracias jQuery y un sencillo script gracias a webdesignerwall.
- Lo primero es descargamos la libreria y hacemos el llamado entre las etiquetas <head> y </head>.
<script type="text/javascript" src="jquery.js"></script> - Ahora bien agregamos la función que usa la librería y le decimos que al dar click en el elemento con clase “eliminar”, el elemento con clase “contenedor” desaparecera.
<script type="text/javascript">
$(document).ready(function(){
$(".contenedor .eliminar").click(function(){
$(this).parents(".contenedor").animate({ opacity: 'hide' }, "slow");
});
});
</script> - Ahora tenemos que usar las clases del script en la estructura html.
<div class="contenedor">
<h2>Ejemplo </h2>
<p>Desaparece esta ventana como por arte de magia.</p>
<p>COCINA MENTAL</p>
<img src="eliminar.png" alt="cerrar" class="eliminar" />
</div> - Hora de darle estilo al contenedor y al botón con los respectivos atributos generales.
.contenedor {
margin:20px auto;
background:#B0E0E6;
border:3px solid #0000FF;
padding:10px;
width:500px;
position:relative;
}
.contenedor .eliminar {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}h2 { color:#0000FF;
font-size:15px;
}
p { font-size:11px;
padding:
0 0 11px;
color:#0000FF;;
}
body {
font-family:Comic Sans MS,
arial;
}
Si te gusto este artículo puedes dejar un comentario, también puedes suscribirte al canal RSS de la página o compartir este articulo por facebook
Deja tu comentario! Comentarios
12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
