jquery ui pestañas mayor cambio de estilo

Estoy usando las pestañas de la IU de jquery y necesito cambiar el estilo de la misma. Necesito rehacer la imagen de fondo, los bordes, casi todo. Necesito que se vea mínima, y no como que sea independiente.jquery ui pestañas mayor cambio de estilo

¿Cuál es la mejor manera de hacerlo? Sin embargo, necesito usar el estilo UI predeterminado para el widget de calendario, que está en la misma página. He investigado mucho y todos parecen apuntar al rodillo temático. Sin embargo, no solo quiero cambiar los colores y los radios fronterizos. Necesito eliminar la mierda. el tema de los rodillos parece cambiar cosas como los colores (no son realmente útiles para el mundo real). ¿Cómo adapto el CSS para las pestañas sin cambiar los estilos de los otros widgets UI en la misma página (deseo que el calendario permanezca como está)?

¿Vale la pena utilizar jquery UI para mis pestañas?

Fuente

2010-03-17 Jonah

No se puede responder la última parte de su pregunta. Eso es algo que debes decidir por ti mismo. El resto es fácil. Simplemente adapta el CSS. – jitter

¿cómo puedo adaptar el CSS para las pestañas sin cambiar los estilos del calendario? – Jonah

Debe consultar la publicación de blog detallada de Keith Wood en estilo JQuery UI Tabs.

La respuesta a su pregunta específica

necesito rempve la imagen de fondo, las fronteras, casi todo. necesito que se vea mínima

es en esta sección "Remove most of the formatting" del puesto de Keith Wood.

Además de esto, hay 10 cambios de estilo más, completos con el CSS requerido para lograr el efecto deseado.

JQuery UI Tabs Styling - Keith Wood Blog Post

Fuente

2012-03-26 07:21:31 Shiva

Debe ser bastante sencillo con CSS. Sus elementos tienen identificaciones y clases y puede tocarlos con CSS. Themeroller es solo una cosa rápida.

Si no recuerdo mal, también puede ajustar las pestañas js y ajustar las líneas que agregan imágenes (si este es el mismo complemento) o simplemente eliminar esa línea por completo a su gusto.

Fuente

2010-03-17 01:25:44 Kevin

Elegí escribir mi propia funcionalidad de pestañas simples cuando, me di cuenta de que no necesitaba la mayoría de las características incorporadas, como cargar contenido AJAX y agregar/eliminar dinámicamente pestañas. Si necesitaba esas características, sería fácil implementarlas yo mismo. Lo que me empujó a deshacerme de jQuery UI Tabs es que tuve que estructurar mis elementos DOM de manera diferente. También necesité peinar mis pestañas para que parecieran mínimas, y pensé que construir desde cero sería un esfuerzo menor que tratar de despojarme mucho.

La característica que más echo de menos es cómo jQuery UI Tabs selecciona automáticamente la pestaña indicada por el # en la URL (sé que puedo copiarlo, pero aún no lo he hecho).

ACTUALIZACIÓN

: Pero, si, si usted se está pegando con ella, puede anular el CSS usando cualquier ID que tenga:

#my-tabs .ui-state-default { 
    background-image: none; /* remove default bg image */ 
}

y así sucesivamente ..

Fuente

2010-03-17 01:26:05

esto parece una buena ruta. ¿Hay alguna manera de evitar que jquery agregue clases al widget para que pueda escribir los estilos desde cero? – Jonah

Prueba la siguiendo en tu CSS asumiendo que tu clase es .mytabs para el css que prevalece. Debe comenzar en

.mytabs li { 
     background : white !important; 
     border-top: 0 !important; 
     border-left: 0 !important; 
     border-right: 0 !important; 

    } 
    .mytabs li.ui-state-active { 
     background : white !important; 
     border-top: 0 !important; 
     border-left: 0 !important; 
     border-right: 0 !important; 
     margin: 0; 


    } 

.mytabs li a 
    { 
     color:   Black !important; 
     font-size:  1.4em !important; 
     font-weight: bolder; 
     padding:  4px 1.5ex 3px !important; 
    }

Fuente

2010-03-17 02:19:37 kiev

Es fácil con algunos CSS, puede anular fácilmente el CSS estándar entregado con jQuery UI. Es posible que no necesites! Importante si tu CSS modificado aparece después de jQuery UI CSS.

También puede eliminar/agregar clases a cada elemento con jQuery en carga, pero eso parece un poco innecesario.

Fuente

2010-03-18 13:29:55

Me pregunto si los atributos! Important deberían estar en las plantillas de jquery ui predeterminadas en primer lugar. Por ejemplo, si cambia las pestañas para que estén en el lado izquierdo o derecho en vez de en la parte superior, el 'borde inferior' no debe tener un valor! Importante, ya que normalmente se sobrescribe.

Fuente

2010-05-17 09:31:15 user339047

Casi todo está cubierto aquí, pero yo estaba mirando alrededor y encontró la manera de tirar cosas que realmente no necesita bastante fácilmente con una sola clase, mientras que después de editar los atributos restantes.

*[class*="ui-"] { 
    border-radius:0; 
    background-image: none; 
    . 
    . 
    . 
}

Esta forma de selección de cada clase que comienza con "ui-" y eliminar cualquier cosa que desee eliminar de jQuery UI.

Fuente

2014-02-05 18:30:29

#my-tabs * { 
    background-image: transparent; 
}

Fuente

2014-10-01 17:37:56 Bellash

Siempre es útil proporcionar algún tipo de explicación junto con cualquier código. –

jquery ui pestañas mayor cambio de estilo

Respuesta

Cuestiones relacionadas