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;
};
No hay comentarios:
Publicar un comentario