El blog de Neurotic

Para una web hemos decidido usar un script llamado cssCheckbox para jquery que reemplaza los checkboxes por imágenes más bonitas. Es bastante simple y funciona si javascript está desactivado pero tiene un par de cosillas que hemos mejorado:

1. Usa dos imágenes para el checkbox, una para el activado y otra para el no activado. Es mejor usar la técnica de la ventana donde es la misma imagen la que tiene los dos estados y así conseguirmos una precarga de la segunda imagen (tal como estaba la primera vez que hacías click había que esperar a que la imagen se cargara)
2. Si desactivas javascript se ve el input y la imagen. Esto ocurre por que se le aplica el estilo al label directamente. Es mejor que sea el css el que aplique a los label la clase “unchecked” y así cuando no se tiene javascript no se ve nada raro

Los cambios:

Para el plugin de jquery:
jQuery.fn.cssCheckbox = function () {
jQuery("input[@type='checkbox'] + label", this)
.each( function(){
if ( jQuery(this).prev()[0].checked )
jQuery(this).addClass("checked");
else
jQuery(this).addClass("unchecked");
})
.hover(
function() { jQuery(this).addClass("over"); },
function() { jQuery(this).removeClass("over"); }
)
.click( function() {
jQuery(this)
.toggleClass("checked")
.prev()[0].checked = !jQuery(this).prev()[0].checked;
jQuery(this)
.toggleClass("unchecked")
.prev()[0].checked == jQuery(this).prev()[0].checked;
})
.prev().hide();
}


Para el archivo de css:
label {
padding-left: 25px;
cursor: pointer;
}
label.unchecked {
background: url(/imagenes/checkbox_on_off.gif) no-repeat;
background-position: 0 -34px;
}
label.checked {
background: url(/imagenes/checkbox_on_off.gif) no-repeat;
background-position: 0 0;
font-weight: bold;
}
label.over {
color: black;
}


Todo lo otro es lo mismo que en http://kawika.org/jquery/cssCheckbox/. Para finalizar os dejo una demo

David de maskotas.es (creo) ha dejado en los comentarios la versión para cssRadio

jQuery.fn.cssRadio = function () {

var context = this;

jQuery("input[@type='radio'] + label", this)
.each( function(){
if ( jQuery(this).prev()[0].checked )
jQuery(this).addClass("checked");
else
jQuery(this).addClass("unchecked");
})
.hover(
function() { $(this).addClass("over"); },
function() { $(this).removeClass("over"); }
)
.click( function() {
jQuery("input[@type='radio'] + label", context)
.each( function() {
jQuery(this)
.removeClass()
.addClass("unchecked")
.prev()[0].checked = false;
});
jQuery(this)
.addClass("checked")
.prev()[0].checked = true;
})
.prev().hide();
}


Fatal error: Call to undefined function menea() in /data/virtual/neuroticweb.com/blog/wp-content/themes/neurotic/single.php on line 39