jQuery: Usando los estilos

Hace poco me puse a cotillear un poco de jQuery , y me impresionó realmente. Aunque JavaScript no es mi lenguaje de programación favorito, jQuery lo hace casi usable.

Pero hoy no vamos a hablar de JavaScript . Hoy sólo mencionaremos CSS y estilos.

Elegir un estilo

Cuando vamos a utilizar jQuery como nuestra CSS, es importante elegir un estilo. Para ello nos ayuda en gran medida jQuery Theme Roller . Aquí podremos tomar los “sabores” clásicos y personalizarlos. Cuando hayamos elegido uno, nos lo podemos descargar.

Para utilizarlo, tendremos que añadir la siguiente línea a nuestra cabecera HTML (entre las marcas “HEAD”), referenciando el lugar donde está la css:

1

<link rel="stylesheet" href="jquery.css" type="text/css" />

Ojo al atributo “href”, que es la dirección relativa (desde el punto de vista del servidor web) de nuestra hoja de estilos.

A partir de este momento podemos utilizar los estilos.

Ahora que estamos en posición de usar el estilo, es importante tratar de evitar usar marcas propias. De esta manera siempre podremos volver a generar un estilo con ThemeRoller sin tener que retocarlo a mano.

Contenedores

Los contenedores son como las cajas que van a tener otros objetos dentro. Algunos son: TABLE, DIV, UL, OL, …

Si queremos darles un estilo típico de contenedor, bastará con añadirles la clase: ui-widget.

En el caso de las tablas, que tenemos cabecera y cuerpo, podemos utilizar ui-widget-header para la cabecera (THEAD) y ui-widget-content para el contenido(TBODY).

Resaltando cosas

Cuando queramos resaltar algo, podemos meterlo dentro de un SPAN y asignarle la clase ui-state-highlight.

Si queremos mostrar un error, basta con usar SPAN y la clase ui-state-error.

Iconos

Esta es la mejor parte :D Tenemos un montón de iconos disponibles, para los que tan solo tenemos que saber jugar con las clases asignadas.

Para asignar dos clases a un mismo elemento debemos separarlas por espacios.

Todos los iconos deben ir en un elemento de tipo SPAN. Si no, es muy probable que no funcionen. Además, el texto que metáis dentro del SPAN no se mostrará.

Como icono, tenéis que asignarle la clase ui-icon, y a continuación el icono que queráis mostrar. Algunos de ellos son: ui-icon-plus, ui-icon-clock, … Tenéis toda la lista en el jQuery Theme Roller , abajo. Basta con que apuntéis con el ratón un icono para que os dé su nombre.

Para saber más

Este artículo pretende ser una mera introducción al tema… Podéis saber más si miráis la propia documentación de jQuery sobre el uso de sus CSS .

Espero que os haya resultado interesante. ¡¡Un saludo!!