jquery ui pestañas cambio de estilo importante

StackOverflow https://stackoverflow.com/questions/2459223

Pregunta

Estoy utilizando fichas de interfaz de usuario jQuery y tengo que cambiar el estilo mayormente en él. Necesito rempve la imagen de fondo, las fronteras, casi todo. Necesito que se vea mínimo, y no como si fuera autónomo.

¿Cuál es la mejor manera de hacer esto? Necesito usar el estilo de interfaz de usuario por defecto para el widget de calendario sin embargo, que está en la misma página. He hecho un gran trabajo de investigación y todo el mundo parece apuntar al tema de rodillos. Sin embargo, yo no sólo quiero cambiar el color y la frontera radios. Necesito eliminar basura. es el tema de rodillos parece ser simplemente cambiar cosas como colores (no realmente útiles para el mundo real). ¿Cómo puedo adaptar el CSS para las pestañas sin cambiar los estilos de los otros widgets de interfaz de usuario en la misma página (Quiero que el calendario para alojarse ya que es)?

¿Es siquiera vale la pena utilizar la interfaz de usuario jQuery para mis pestañas?

¿Fue útil?

Solución

Debe retirar blog detallada de Keith madera en estilo jQuery UI aquí .

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 " Eliminar la mayor parte de la formato" del mensaje de Keith Wood.

Además de esto, hay 10 más cambios en el estilo, completo con el CSS necesario para lograr el efecto deseado.

jQuery UI aquí Styling - Keith Wood Blog Post

Otros consejos

he elegido para escribir mi propia funcionalidad pestañas simple cuando me di cuenta que yo no necesitaba la mayoría de sus características incorporadas, como el contenido de carga AJAX y dinámica la adición / eliminación de pestañas. Si necesitaba esas características, sería fácil de implementar ellos yo mismo. Lo que me empujó a abandonar jQuery UI aquí es que tuve para estructurar mis elementos DOM diferente. También necesitaba el estilo de mis pestañas para mirar mínimo, y pensé que la construcción desde cero sería menos esfuerzo de tratar de despojar mucho.

La característica que más extraño es cómo jQuery UI aquí automáticamente selecciona la pestaña indicada por el # en la URL (sé que sólo puede copiarlo - simplemente no han llegado a ella todavía).

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 ..

Pruebe lo siguiente en su css suponiendo que su clase es .mytabs para el css primordial. Se debe empezar 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;
    }

Es fácil con un poco de CSS se puede reemplazar fácilmente el CSS de serie con jQuery UI. Puede que no necesite! Importante si su CSS modificado aparece después de la CSS jQuery UI.

También puede eliminar / añadir clases para cada elemento con jQuery en la carga, pero que parece un poco innecesario.

Debe ser bastante sencillo con CSS. Sus elementos tienen identificadores y clases sobre ellas y se puede tocar con CSS. Themeroller es sólo una rápida salida al asunto.

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

Me pregunto si los atributos importantes! Deben estar en las plantillas de interfaz de usuario jQuery por defecto en el primer lugar. Por ejemplo, si cambia las pestañas para estar en el lado izquierdo o derecho en lugar de arriba, el 'border-bottom' debe no tiene! Importante, ya que esta es comúnmente sobrescribe.

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;
     .
     .
     .
}

De este modo, seleccionar todas las clases que comienza con "ui-" y eliminar cualquier cosa que desee eliminar de jQuery UI. 

 #my-tabs * {
    background-image: transparent;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top