Hacia el Vacio: JavaScript

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

Veamos el código y su funcionamiento:

/*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;
       }
}

¿Y como podemos usar un objeto Spoiler?, de la siguiente manera:

<html>
<body>

<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

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>

<input class="botonspoi" id="spoi" type="button" value="Show" />


<div class="spoi" id="Contenidospoi">
<p >Contenido del spoiler </p>
</div>


<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.

Hacia el Vacio

3 de noviembre de 2010

Utilidades en JavaScript: Boton de Spoiler 2 (Esta vez con Objetos)

30 de septiembre de 2010

Utilidades en JavaScript: Boton de Spoiler