Estilizar listas con jQuery y CSS
Algunas veces, ya sea por estética o para dar un mejor estilo a nuestros módulos, sistemas o páginas, resulta interesante reemplazar los estilos de los objetos HTML. Este post va ser el comienzo de una serie de posts para reemplazar la estica de estos elementos. Para nuestro objetivo nos valemos del framework jQuery y algo de CSS. Empezaremos con las listas, es totalmente aplicable, tanto a listas ordenadas como desordenadas. Al final del post tienen la demo y la descarga del código de lo que explicaré a continuación. Manos a la obra.
Primer Paso: Creamos la lista, en este caso desordenada
<ul class="checkboxLista"> <li class="uncheck">Español</li> <li class="uncheck">Inglés</li> <li class="uncheck">Portugues</li> <li class="uncheck">Alemán</li> </ul>
Segundo Paso: Aplicamos los estilos necesarios
Como habrán notado, aplicamos el estilo inicial “unckeck” a cada uno de los elementos. Tendremos dos estilos uno desactivado y el otro se aplica cuando los activamos. Los estilos serían algo como esto:
.checkboxLista{list-style:none; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.uncheck{
background:url(img/uncheck1.png) no-repeat;
padding-left: 25px;
cursor:pointer;
}
.check{
background:url(img/check1.png) no-repeat;
padding-left: 25px;
font-weight: bold;
cursor:pointer;
}
Para el caso práctico creamos dos imagenes, una para el check y otra para el uncheck. Aunque es mucho mas óptimo aplicar la técnica de CSS Sprite, pero este punto lo dejaremos para un próximo post. Pero si desean investigar sobre el tema, aca un video post de Pedro Crochero de CssBlog.
Tercer Paso: Los efectos con jQuery
Y ahora el turno a jQuery:
$(document).ready(function(){
//detectamos el click en el elemento
$(".checkboxLista li").click(function (){
//si el elemento tiene el estilo desactivado o no
if($(this).hasClass('uncheck')){
//removemos el estilo uncheck y aplicamos el check
$(this).removeClass('uncheck');
$(this).addClass('check');
}else{
$(this).removeClass('check');
$(this).addClass('uncheck');
}
});
});
De esta manera y con muy poco código estilizamos una lista de opciones. Quedaría en uds. diseñar sus propios estilos de tal forma de adaptarlos a sus proyectos. Como es de costumbre les dejo la DEMO y la DESCARGA del código. Si te quedo alguna duda o aporte que quieras hacer, te esperamos en los comentarios. Un cordial Saludo.
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Genial tu sitio y estoy muy contento de que nuestra gente genere contenido tan original y útil como el tuyo.
Espectacular los códigos que estás enseñando. Te felicito.