jQuery UI Tabs Minimal Styling

Question

En mi aplicación, hasta ahora he evitado la necesidad de cargar cualquier hoja de estilo jQuery, pero el plugin UI-tabs parece necesitar algo de CSS para funcionar. OK, está bien, pero los ejemplos te hacen cargar TODOS los estilos de UI y, quizás lo más importante, el estilo de las pestañas arruina completamente mi propio estilo.

¿Hay algún lugar para aprender cómo puedo proporcionar el CSS suficiente para que las pestañas funcionen, para que pueda conservar mi propio estilo?

No me importa una cantidad mínima de ayuda de estilo para organizar las pestañas muy bien o algo así, pero la imagen de fondo, los colores ... chocan realmente mal con mi propio estilo.

Ah, y no gracias al rodillo temático, que estoy seguro es bueno para algunas personas. Solo que no en este caso, gracias.

Answer 1

Si nos fijamos en la Tabs Demo Page puede hacer clic en la pestaña Themig para ver qué estilos están en uso, en la actualidad se ve así:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"> 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li> 
    <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"> 
     <p>Tab one content goes here.</p> 
    </div> 
    ... 
</div> 

continuación, puede utilizar la jQuery UI CSS Framework documentation encontrar una descripción de cada general clase. Las clases específicas del widget no están en la lista, ya que están bien ... por widget.

La mejor manera de hacerte una idea de lo que hacen esas clases es usar ThemeRoller, o mirar el tema predeterminado (for example here) y solo mirar el CSS para esas clases, puedes usar eso y ajustar por tu cuenta necesita, aquí está el tema base actual CSS para .ui-tabs-* clases:

.ui-tabs { position: relative; padding: .2em; zoom: 1; } 
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } 
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } 
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } 
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } 
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } 
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } 
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } 
.ui-tabs .ui-tabs-hide { display: none !important; }