¿Cómo añadir temas a sus elementos ajax para HTML5 y CSS3 programación

La herramienta tema jQuery hace que sea muy fácil de decorar sus elementos a través de CSS3. La gran cosa acerca de temas de jQuery es que son semántico es decir, se especifica el objetivo general del juego, y luego dejar que el tema de aplicar la CSS específico apropiado. Puede utilizar la aplicación ThemeRoller para crear fácilmente nuevos temas o modificar los ya existentes.

Muchos de los elementos de la interfaz de jQuery utiliza automáticamente el tema de CSS actual. Por supuesto, también se puede aplicar a cualquiera de sus propios elementos para conseguir un aspecto uniforme.

Los temas son simplemente clases CSS. Para aplicar un tema CSS a un elemento, usted puede agregar una clase especial para el objeto.

Por ejemplo, puede hacer una mirada párrafo como la definición actual de la ui-Reproductor añadiendo el código a la misma:

Mi div ahora se ve como un widget

Por supuesto, la adición de clases en el código HTML viola uno de los principios del diseño semántico, así que es mejor que hacer el trabajo en javascript con jQuery:

 funcionar Themify () {// añadir CSS basada en el tema de la elements$("div").addClass("ui-widget").addClass("ui-widget-content").addClass("ui-corner-all")-$(":header").addClass("ui-widget-header").addClass("ui-corner-all")-$("#resizeMe").append('') -}

los Themify () función añade todos los temas a los elementos de la página, aplicando el tema jQuery bonita para ella.

1. Identificar todos los divs con jQuery.

2. Agregue el ui-Reproductor clase para todos los divs.

   Esta clase se define en el tema. Todos los temas de jQuery tienen esta clase definida, pero los detalles varían según el tema. De esta manera, se puede intercambiar un tema para cambiar la apariencia y el código todavía funciona. los ui-Reproductor clase define un elemento como un widget.

3. Añadir ui-widget-contenido así como.

   Los divs necesita tener dos clases conectados, por lo que algunos programadores usan encadenamiento para especificar que divs también deben ser miembros de la clase. Esta ui-Reproductor-contenido clase indica que el contenido del widget deben ser de estilo.

4. Especificar las esquinas redondeadas.

   Las esquinas redondeadas se han convertido en un estándar del diseño visual web 2.0. Este efecto es muy fácil de lograr con jQuery - sólo tiene que añadir el ui-esquina todo clase a cualquier elemento que desea tener las esquinas redondeadas.

   Las esquinas redondeadas usan CSS3, que todavía no es compatible con todos los navegadores. Su página no mostrará esquinas redondeadas en los navegadores más antiguos, pero la página seguirá funcionando bien lo contrario.

5. Hacer todos los titulares se ajustan al estilo de componentes-header.

   Los temas de jQuery incluyen un estilo titular agradable. Usted puede hacer todas las etiquetas de encabezado (H1 a H6) siguen este tema. Utilizar el :encabezamiento filtrado para identificar todas las partidas, y aplicar el ui-Reproductor-encabezamiento y ui-esquina todo clases a estos encabezados.

El paquete de jQuery UI soporta un número de clases interesantes.

Unas pocas otras clases se definen en temas de interfaz de usuario, pero estos son los más comúnmente utilizado. Consulte la documentación actual jQuery UI para más detalles.

Cómo agregar un icono

Tenga en cuenta la pequeña inicio que aparece dentro del elemento. Este elemento es un ejemplo de un icono de jQuery UI. Todos los temas de jQuery soportan un conjunto estándar de iconos, que son pequeñas imágenes (cuadrados 16px). El conjunto de iconos incluye iconos estándar para flechas, así como imágenes de uso común en los menús y barras de herramientas.

Algunos elementos de la interfaz de usuario jQuery utilizan iconos de forma automática, pero también se pueden agregar directamente. Para utilizar un icono en sus programas, siga estos pasos:

1. Incluir un tema jQuery UI.

   Los iconos son parte del paquete de temas. Incluir la hoja de estilos CSS que se corresponde con el tema.

2. Asegúrese de que las imágenes son accesibles.

   Cuando se descarga un paquete de temas, incluye un directorio de imágenes. Las imágenes incluidas en este directorio se utilizan para crear fondos personalizados, así como iconos. El archivo CSS espera un directorio llamado a estar en el mismo directorio que el CSS.

   Este directorio debe contener varias imágenes que comienzan con ui-iconos. Estas imágenes contienen todos los iconos necesarios. Si los archivos de imagen de icono no están disponibles, los iconos no se muestran.

3. Crear un lapso donde desea que el icono aparezca.

   Colocar un elemento span vacío donde desea que el icono aparezca en el HTML. Usted puede colocar el lapso directamente en el código HTML si lo desea, o lo puedes añadir a través de jQuery.

4. Conecte el ui-icono clase para el lapso.

   Esto le dice a jQuery para tratar el lapso como un icono. El contenido de la duración se oculta, y el lapso serán redimensionadas para mantener una imagen de 16 píxeles icono cuadrado.

5. Adjunte una segunda clase para identificar el icono específico.

   Mira la página ThemeRoller para ver los iconos disponibles. Al pasar sobre un icono en esta página, usted puede ver el nombre de la clase asociada con el icono.

Puedes añadir el código directamente en el código HTML siguiente:

Este es mi texto

O bien, puede utilizar jQuery para añadir el código correspondiente a su elemento:

$ ("# myPara"). append ('') -