A pasado tiempo desde mi ultima entrada, pero es por que estaba liado poniendo a punto el lector de mangas online, y la galeria de images que se puede ver en los animes.
La razon por la que vuelvo a postear el codigo del boton de Spoiler es por que al hacerlo con objetos se han mejorado varias cosas:
- Cualquier objeto puede ser un botón para mostrar el Spoiler.
- Cualquier objeto puede ser un Contenedor de Spoiler
- Ambos objetos pueden tener el ID que nostros queramos sin forzarlo a pertenecer a una clase concreta
/*El objeto cuando se crea recibe dos ID's, el primero el que actua como botón y el segundo el que actua como contenedor de la informacion a ocultar.*/
var Spoiler = function (idOrigen, idDestino) {
this.origen = idOrigen;
this.destino = idDestino;
/*El objeto Spoiler dispone de un método para iniciarlo que recibe dos parámetros opcionales, el mensaje que se muestra en el boton cuando el contenido está visible (Por ejemplo: "Ocultar Spoiler") y el 2º el mensaje que muestra en el boton cuando el contenido no está visible (Por ejemplo: "Mostrar Spoiler"); */
this.IniciaSpoiler = function (mV, mO) {
var Este = this;
//Al principio forzamos a que el contenedor no se muestre.
$("#" + this.destino).css("display", "none");
//Si el mensaje está definido lo ponemos
if (mO != undefined) {
$("#" + this.origen).html(mO); //Si es algo que no es un botón
$("#" + this.origen).val(mO); //Si es un botón
}
$("#" + this.origen).click (function () { //Cuando se haga click sobre el que actua como botón...
if ($("#" + Este.destino).is(":hidden")) { //Si esta oculto lo mostramos y cambiamos el mensaje
$("#" + Este.destino).slideDown("slow");
if (mV != undefined) {
$("#" + Este.origen).val(mV);
$("#" + Este.origen).html(mV);
}
} else { //Si esta visible lo ocultamos y cambiamos el mensaje.
$("#" + Este.destino).slideUp();
if (mO != undefined) {
$("#" + Este.origen).val(mO);
$("#" + Este.origen).html(mO);
}
}
});
}
//Le he añadido dos métodos más por si se quiere cambiar el botón o el contenedor en cualquier
//momento.
this.CambiaOrigen = function (nOrigen) {
this.origen = nOrigen;
}
this.CambiaDestino = function (nDestino) {
this.destino = nDestino;
}
}
var Spoiler = function (idOrigen, idDestino) {
this.origen = idOrigen;
this.destino = idDestino;
/*El objeto Spoiler dispone de un método para iniciarlo que recibe dos parámetros opcionales, el mensaje que se muestra en el boton cuando el contenido está visible (Por ejemplo: "Ocultar Spoiler") y el 2º el mensaje que muestra en el boton cuando el contenido no está visible (Por ejemplo: "Mostrar Spoiler"); */
this.IniciaSpoiler = function (mV, mO) {
var Este = this;
//Al principio forzamos a que el contenedor no se muestre.
$("#" + this.destino).css("display", "none");
//Si el mensaje está definido lo ponemos
if (mO != undefined) {
$("#" + this.origen).html(mO); //Si es algo que no es un botón
$("#" + this.origen).val(mO); //Si es un botón
}
$("#" + this.origen).click (function () { //Cuando se haga click sobre el que actua como botón...
if ($("#" + Este.destino).is(":hidden")) { //Si esta oculto lo mostramos y cambiamos el mensaje
$("#" + Este.destino).slideDown("slow");
if (mV != undefined) {
$("#" + Este.origen).val(mV);
$("#" + Este.origen).html(mV);
}
} else { //Si esta visible lo ocultamos y cambiamos el mensaje.
$("#" + Este.destino).slideUp();
if (mO != undefined) {
$("#" + Este.origen).val(mO);
$("#" + Este.origen).html(mO);
}
}
});
}
//Le he añadido dos métodos más por si se quiere cambiar el botón o el contenedor en cualquier
//momento.
this.CambiaOrigen = function (nOrigen) {
this.origen = nOrigen;
}
this.CambiaDestino = function (nDestino) {
this.destino = nDestino;
}
}
¿Y como podemos usar un objeto Spoiler?, de la siguiente manera:
<html>
<body>
<!-- Establecemos la estructura básica boton/div -->
<input type="button" id="ActuoComoBoton"/>
<div id="ActuoComoContenedor">
<p> Información Oculta </p>
</div>
<script>
</script>
</body>
</html>
<body>
<!-- Establecemos la estructura básica boton/div -->
<input type="button" id="ActuoComoBoton"/>
<div id="ActuoComoContenedor">
<p> Información Oculta </p>
</div>
<script>
//Declaramos una variable de tipo Spoiler
var spoilerPrueba = new Spoiler("ActuoComoBoton", "ActuoComoContenedor");//Activamos el spoiler
spoilerPrueba.IniciaSpoiler("Ocultar Informacion", "Mostrar Informacion");</script>
</body>
</html>
Información Oculta
No hay comentarios:
Publicar un comentario