2011-10-17 15 views
9

Tal vez me falta algo, pero después de leer los documentos de jQuery UI, no veo nada sobre la aplicación de estilos de tema a los widgets normales, como las etiquetas de entrada y selección. Después de llamar al button() en los botones y al datepicker() en las etiquetas de entrada que seleccionarán las fechas, se supone que debo ajustar las entradas y las áreas de texto normales en un <div class="ui-widget"> para obtener un estilo uniforme o darles una cierta clase de CSS o llamar a una función en la carga de documentos que estiliza todo lo demás?¿Cómo aplico estilos de jQuery UI a elementos de formulario normales, como entrada y etiquetas de selección?

Respuesta

4

Los temas de la interfaz de usuario de jQuery funcionan igual que cualquier otro documento de CSS que usaría. Si hay un conjunto de estilos que busca en un elemento en particular, a menudo todo lo que necesita hacer es agregar las clases que definen los estilos que desea para el elemento en cuestión.

La parte difícil es que, dependiendo del navegador, muchos elementos de la forma tienen diferentes grados de stylability. En particular, Internet Explorer utiliza controles de formulario del sistema operativo nativos, que obtienen su estilo predeterminado de la configuración del tema del sistema operativo, mientras que otros navegadores como Chrome y Firefox usan su propio conjunto de controles de formulario y tienen un estilo predeterminado establecido por sí mismos.

En muchos casos, lo que hacen los widgets de jQuery UI es ocultar los elementos de formulario predeterminados y luego reemplazarlos con elementos más estiloables, como una estructura de <div> s, que se puede diseñar para imitar elementos de formulario reales. Estas estructuras falsas también tienen controladores de eventos de javascript unidos para capturar la entrada y la vuelven a asignar a los elementos de formulario reales, así como también la renderizan dentro de ellos mismos.

Por lo tanto, en pocas palabras, la aplicación de estilos de interfaz de usuario de jQuery para formar elementos a veces puede ser tan simple como aplicar las clases de tema o, a veces, ser tan doloroso como tener que imitar los elementos del formulario real. Todo depende de los buscadores de destino y los estilos que desee aplicar.

4

Algunos ejemplos que usan Jquery.

$("input:text").addClass("ui-corner-all"); 

$("#Submit").button(); 
Cuestiones relacionadas