Hoy comienza una nueva sección en Hacia el Vacio en donde pondremos código en javascript para hacer herramientas que nos ayuden a mejorar nuestras webs. En esta ocasión, un elemento indispensable hoy en día, el botón de spoiler, para ocultar esas imágenes que destripan una serie o la solución de un juego.
Usaremos la libreria Jquery, que nos hace la mitad del trabajo, ya que trae funciones para hacer efectos de animación, facilita el control de los eventos, y la posibilidad de usar sus selectores que agilizan la obtención de los elementos HTML.
<html>
<style>
/*Definimos un estilo para el contenido del spoiler*/
.spoi { text-align: center;border-style:double;display:none;}
/*Definimos un estilo para el boton que muestra el spoiler*/
.botonspoi {position: relative;
margin-left: 45%;
margin-right: auto;}
</style>
<body>
<!--Creamos un boton para mostrar el spoiler-->
<input class="botonspoi" id="spoi" type="button" value="Show" />
<!--Creamos un div que contenga la informacion a ocultar-->
<div class="spoi" id="Contenidospoi">
<p >Contenido del spoiler </p>
</div>
<!--Cargamos la libreria jquery-->
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script>
//Cuando hagamos clic en el boton etiquetado con el id spoi
$("#spoi").click(function () {
//Si el contenido esta oculto lo mostramos y, si no lo esta, lo ocultamos
if($("#Contenidospoi").is(":hidden")) {
$("#Contenidospoi").slideDown("slow");
$("#spoi").val("Hide");
} else {
$("#Contenidospoi").slideUp();
$("#spoi").val("Show");
}
});
</script>
</body>
</html>
<style>
/*Definimos un estilo para el contenido del spoiler*/
.spoi { text-align: center;border-style:double;display:none;}
/*Definimos un estilo para el boton que muestra el spoiler*/
.botonspoi {position: relative;
margin-left: 45%;
margin-right: auto;}
</style>
<body>
<!--Creamos un boton para mostrar el spoiler-->
<input class="botonspoi" id="spoi" type="button" value="Show" />
<!--Creamos un div que contenga la informacion a ocultar-->
<div class="spoi" id="Contenidospoi">
<p >Contenido del spoiler </p>
</div>
<!--Cargamos la libreria jquery-->
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script>
//Cuando hagamos clic en el boton etiquetado con el id spoi
$("#spoi").click(function () {
//Si el contenido esta oculto lo mostramos y, si no lo esta, lo ocultamos
if($("#Contenidospoi").is(":hidden")) {
$("#Contenidospoi").slideDown("slow");
$("#spoi").val("Hide");
} else {
$("#Contenidospoi").slideUp();
$("#spoi").val("Show");
}
});
</script>
</body>
</html>
Los selectores usados en este código son siempre de la forma $('#idElemento') y lo que hacen es devolver cualquier elemento de la página que tenga el id introducido. El selector $("#spoi") del código nos devuelve el objeto input de tipo button que insertamos al principio y que usamos para acceder a su metodo click(), que admite como entrada una funcion, que se ejecutara cuando hagamos click sobre el elemento, en este caso el botón.
Muy util, esperando siguiente!! XD
ResponderEliminar