Plugin checkbox personalizado con jQuery

  • Por
Un plugin en jQuery para hacer un campo de formulario checkbox pero con un diseño distinto, totalmente personalizable por el desarrollador.
A veces los campos de formulario que tenemos disponibles en HTML son un poco "aburridos", por decirlo de alguna manera. Quiero decir que son siempre iguales para todas las páginas y existen pocas opciones para configurar su aspecto, sobre todo en el caso de los elementos checkbox. Como diseñadores caprichosos, nosotros podríamos desear que nuestros checkboxes tuvieran un aspecto o color determinado, que haga mejor combinación con otros elementos de nuestro layout. Y estas son cosas que podemos conseguir fácilmente con un poco de jQuery.

En este artículo pretendemos hacer un plugin para crear campos checkbox personalizados, con las mismas funcionalidades de los checkbox normales, pero que tengan un aspecto configurable por el desarrollador. Para ello utilizaremos el modelo de creación de plugins en jQuery, de modo que haremos todo el trabajo en un plugin que cualquier persona podría utilizar en su sitio web y configurar los checkbox según sus preferencias.

Para seguir las explicaciones de este artículo necesitaremos saber acerca de la creación de plugins en jQuery y en concreto vamos a practicar con dos cosas que hemos aprendido recientemente:


Para apreciar con exactitud cómo serán algunos ejemplos de checkbox que vamos a realizar, podemos echar un vistazo al ejemplo en marcha.

Personalización del plugin por medio de objeto de opciones

Podemos comenzar por ver el principio de código del plugin, donde estamos definiendo las variables de configuración por defecto y las estamos extendiendo con las variables de configuración definidas al invocarlo.

jQuery.fn.checkboxPersonalizado = function(opciones) {
   //opciones de configuración por defecto
   var conf = {
      activo: true,
      colorTextos: {
         activo: "#00f",
         pasivo: "#669"
      },
      textos: {
         activo: "",
         pasivo: ""
      },
      imagen: {
         activo: 'images/thumb_up.png',
         pasivo: 'images/thumb_down.png'
      },
      cssElemento: {
         padding: "2px 2px 2px 24px",
         display: "block",
         margin: "2px",
         border: "1px solid #eee",
         cursor: "pointer"
      },
      cssAdicional: {
         
      },
      nameCheck: ""
   };
   //Las extiendo con las opciones recibidas al invocar el plugin
   jQuery.extend(conf, opciones);
   
   this.each(function(){

      //CÓDIGO DEL PLUGIN

   });
   return this;
};

Tal como se puede ver, se han definido varias variables para configurar el objeto, que se dispondrán en un objeto que tenemos en la variable "configuracion". Entre las variables de configuración tenemos una llamada "activo" con un valor boleano para decidir si el elemento checkbox estaría o no seleccionado desde el principio. Tenemos una variable "colorTextos", para definir el color del texto cuando el elemento está activo y pasivo. También tenemos otra serie de configuraciones para los estados de activo y pasivo (seleccionado o no seleccionado), como la imagen que se tiene que mostrar al lado del texto.

Ahora veamos el código del plugin, lo que iría dentro de this.each(). Recordemos que cada variable creada aquí es accesible dentro de todo el bloque de código definido por las llaves del this.each(). Así mismo, las funciones declaradas aquí son accesibles desde cualquier parte de este bloque.

//variables locales al plugin
var miCheck = $(this);
var activo = conf.activo
//el elemento checkbox interno pero no visible
var elementoCheck = $('<input type="checkbox" style="display: none;" />');
//el nombre del checkbox puede ser configurado desde options o con el propio texto del campo
if(conf.nameCheck==""){
   elementoCheck.attr("name", miCheck.text());
}else{
   elementoCheck.attr("name", conf.nameCheck);
}
//inserto el checkbox en la página
miCheck.before(elementoCheck);
//aplico estilos que vienen en la configuración
miCheck.css(conf.cssElemento);
miCheck.css(conf.cssAdicional);

//si el elemento estaba marcado para estar activo
if (activo){
   //lo activo
   activar();
}else{   
   //lo desactivo
   desactivar();
}

//defino un evento para el elemento
miCheck.click(function(e){
   //compruevo la variable activo, definida dentro del plugin
   if(activo){
      desactivar();
   }else{   
      activar();
   }
   activo = !activo;
});

//función local en el plugin para desactivar el checkbox
function desactivar(){
   //cambio los estilos para el elemento a los marcados como pasivos
   miCheck.css({
      background: "transparent url(" + conf.imagen.pasivo + ") no-repeat 3px",
      color: conf.colorTextos.pasivo
   });
   //si hay un texto específico para cuando estaba pasivo
   if (conf.textos.pasivo!=""){
      miCheck.text(conf.textos.pasivo)
   }
   //desmarcho el checkbox interno que es invisible, pero que se envía como elemento de formulario.
   elementoCheck.removeAttr("checked");
};                           

function activar(){
   miCheck.css({
      background: "transparent url(" + conf.imagen.activo + ") no-repeat 3px",
      color: conf.colorTextos.activo
   });
   if (conf.textos.activo!=""){
      miCheck.text(conf.textos.activo)
   }
   elementoCheck.attr("checked","1");
};

El código está convenientemente comentado para que se pueda entender mejor. Pero lo que queremos mostrar en este caso es que hemos creado dos funciones dentro del código del plugin: activar() y desactivar(). Esas dos funciones, al estar dentro del bloque this.each(), se pueden acceder desde cualquier parte del plugin y comparten el mismo ámbito de variables que el propio plugin, luego podremos acceder desde ellas a cualquier variable definida en el bloque this.each().

Para que quede un poco más clara la estructura completa del plugin, coloco a continuación su código completo:

jQuery.fn.checkboxPersonalizado = function(opciones) {
   //opciones de configuración por defecto
   var conf = {
      activo: true,
      colorTextos: {
         activo: "#00f",
         pasivo: "#669"
      },
      textos: {
         activo: "",
         pasivo: ""
      },
      imagen: {
         activo: 'images/thumb_up.png',
         pasivo: 'images/thumb_down.png'
      },
      cssElemento: {
         padding: "2px 2px 2px 24px",
         display: "block",
         margin: "2px",
         border: "1px solid #eee",
         cursor: "pointer"
      },
      cssAdicional: {
         
      },
      nameCheck: ""
   };
   //Las extiendo con las opciones recibidas al invocar el plugin
   jQuery.extend(conf, opciones);
   
   this.each(function(){
      var miCheck = $(this);
      var activo = conf.activo
      var elementoCheck = $('<input type="checkbox" style="display: none;" />');
      if(conf.nameCheck==""){
         elementoCheck.attr("name", miCheck.text());
      }else{
         elementoCheck.attr("name", conf.nameCheck);
      }
      miCheck.before(elementoCheck);
      miCheck.css(conf.cssElemento);
      miCheck.css(conf.cssAdicional);
      
      if (activo){
         activar();
      }else{   
         desactivar();
      }
      miCheck.click(function(e){
         if(activo){
            desactivar();
         }else{   
            activar();
         }
         activo = !activo;
      });
      
      function desactivar(){
         miCheck.css({
            background: "transparent url(" + conf.imagen.pasivo + ") no-repeat 3px",
            color: conf.colorTextos.pasivo
         });
         if (conf.textos.pasivo!=""){
            miCheck.text(conf.textos.pasivo)
         }
         elementoCheck.removeAttr("checked");
      };                           
      
      function activar(){
         miCheck.css({
            background: "transparent url(" + conf.imagen.activo + ") no-repeat 3px",
            color: conf.colorTextos.activo
         });
         if (conf.textos.activo!=""){
            miCheck.text(conf.textos.activo)
         }
         elementoCheck.attr("checked","1");
      };   
   });
   return this;
};

Invocar al plugin checkbox personalizado con jQuery

Ya que hemos hecho un checkbox personalizado, por un objeto de options, vamos a mostrar cómo se pueden crear varios tipos de checkbox con este código. Veamos el siguiente HTML:

<span class="ch">Seleccionar</span>
<span class="ch">Me interesa</span>
<span class="ch">Oooo</span>
<br>
<br>
<span id="otro">otro suelto</span>

Se puede apreciar que tenemos simples elementos SPAN. Por un lado tenemos 3 SPAN con la clase "ch" y por otro lado otro SPAN suelto con identificador "otro". Ahora veamos cómo los convertiríamos en campos de formulario checkbox personalizados:

$(".ch").checkboxPersonalizado();

Así crearíamos 3 checkbox, en los 3 primeros SPAN que tenían la class "ch". Estos checkbox personalizados se crearían con las opciones por defecto.

$("#otro").checkboxPersonalizado({
   activo: false,
   colorTextos: {
      activo: "#f80",
      pasivo: "#98a"
   },
   imagen: {
      activo: 'images/weather_cloudy.png',
      pasivo: 'images/weather_rain.png'
   },
   textos: {
      activo: 'Buen tiempo :)',
      pasivo: 'Buena cara ;)'
   },
   cssAdicional: {
      border: "1px solid #dd5",
      width: "100px"
   },
   nameCheck: "buen_tiempo"
});

En este segundo caso de invocación al plugin estamos convirtiendo en un checkbox personalizado el último SPAN, que tenía identificador "otro". En este segundo caso estamos utilizando multitud de variables de configuración específicas, que harán que el checkbox tenga un aspecto radicalmente diferente a los anteriores.

Para acabar, se puede ver el ejemplo en funcionamiento en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Diego

24/6/2010
utilizar plugin
Hola: ¿Puedo utilizar este pluging jQuery libremente en mis páginas?

midesweb

24/6/2010
Usa el plugin para lo que desees!
Hola Diego,

Claro que puedes usar el plugin para lo que más te convenga... si nos citas como autores en alguna parte siempre se agradece. Pero es libre de uso. En realidad son ejemplos para que las personas aprendan plugins jQuery, pero procuro hacer siempre cosas que tengan alguna utilidad para el público en general.
Saludos!

Leonardo

18/12/2010
Muy bueno, pero...
... solo la idea ya que no me funcionó en la realidad. Sin importar el estado (la imagen) el estado real del checkbox oculto al hacer un POST era siempre "on".

Igualmente la solución fue muy sencilla, remplacé el checkbox oculto por un campo hidden.

Locutus

18/12/2010
Muy bueno, pero...
... solo la idea ya que no me funcionó en la realidad. Sin importar el estado (la imagen) el estado real del checkbox oculto al hacer un POST era siempre "on".

Igualmente la solución fue muy sencilla, remplacé el checkbox oculto por un campo hidden.

jmacc

21/2/2011
Excelente ejemplo
Lo pueden analizar mejor de esta manera

http://jsfiddle.net/jmacc/guyQh/2/