Personalización del plugin por medio de objeto de opciones - II

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");

};