cssCheckbox mejorado ligeramente
14 Marzo, 2007 por CarlosPara 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:
- 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)
- 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();
}
Marzo 19th, 2007 at 10:20 pm
Imagino que hay que llamar previamente a jquery también, no?
Marzo 20th, 2007 at 1:46 pm
Sí, es que no puse todas las intrucciones por perrería y para que la gente fuese a la web del verdadero creador de esto, yo sólo lo he mejorado un poquito.
Julio 18th, 2007 at 1:23 pm
Recomendaría que la imagen con los estados del checkbox fuera más alta, y que los distintos estados estuviesen más separados entre sí. Con esto se conseguiría que a tamaños de fuente mayores, no se vieran trozos de los distintos estados.
Un saludo.
Julio 23rd, 2007 at 1:17 pm
Hola Juan,
ya tuve en cuenta eso y los puse bastante separados aunque si dices eso seguramente es que no los separé lo suficiente.
Febrero 29th, 2008 at 1:04 am
Hola a tod@s, a lo mejor llego un poco tarde, he estado siguiendo el tutorial y me funciona perfectamente, el unico problemas es ¿se puede hacer un enlace para marcar o desmarcar todos los checkboxs a la vez? le he estado dando mil vueltas por google pero o no encuentro nada o no hay nada, a ver si alguien sabe como hacerlo o por lo menos orientarme.
Gracias y un saludo.
Febrero 29th, 2008 at 2:37 pm
David, con jquery no es muy complicado aunque antes he buscado un poco y he encontrado esto:
http://www.texotela.co.uk/code/jquery/checkboxes/
Febrero 29th, 2008 at 4:56 pm
Gracias Carlos, esa web ya la vi lo que pasa que no consigo implementarlo con las funciones del cssCheckbox. Lo probé con checkboxs normales y si realiza las funciones pero como luego el cssCheckbox tiene sus cosas que a parte de cambiar la imagen tambien tiene que cambiar el estado del checkbox no se bien donde meter el codigo de texotela en el codigo del cssCheckbox
En php, mysql y javascript lo que quieras pero acabo de empear con jquery que lo veo una gran ayuda pero todavia me pierdo un poco pero intentaré revisar de nuevo la web que me dices a ver si consigo algo.
Por cierto, voy a abusar un poco más si me lo permites: cuando se pone $(”#myform”) ¿se refiere a que en “myform” hay que cambiarlo por el nombre del formulario o es que existe un comando llamado “#myform” para llamar al formulario que haya en esa página?
Gracias y un saludo
Marzo 1st, 2008 at 9:16 pm
Mientras investigo o no investigo, os explico algo para los que les pueda interesar:
Existe también el script cssRadio (http://kawika.org/jquery/cssRadio/) que es igual que el cssCheckbox aquí comentado pero en lugar de ser para checkbox es para radio, el que quiera utilizar las mismas mejoras de éste post hay cambiar lo siguiente:
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();
}
Marzo 1st, 2008 at 9:17 pm
:( no se por que no ha salido el codigo como tenía que salir, pero creo que se entiende…. lo que está en negrita es lo que hay que añadir
Marzo 3rd, 2008 at 3:59 pm
Muchas gracias David, lo he puesto en el post.
Respecto a que si pone myform supongo que se refiere al nombre del id de tu fomulario.