Onglets de l'interface utilisateur jQuery Minimal Styling

Question

Dans mon application, j'ai jusqu'ici évité de devoir charger toutes les feuilles de style jQuery, mais le plugin UI-tabs semble avoir besoin de CSS pour fonctionner. OK, bien, mais les exemples ont vous charger tous les styles de l'interface utilisateur et, peut-être plus important, le style de tabulation ruine totalement mon propre look and feel.

Y at-il un endroit pour apprendre comment je peux fournir juste assez de CSS pour que les onglets fonctionnent, afin que je puisse conserver mon propre style? Cela ne me dérange pas une petite quantité d'aide de style pour arranger les onglets gentiment ou quelque chose, mais l'image de fond, les couleurs .... ils s'affrontent vraiment mal avec mon propre style.

Oh, et non grâce au Thème Roller, qui, j'en suis sûr, est agréable pour certaines personnes. Juste pas dans ce cas, merci.

Answer 1

Si vous regardez le Tabs Demo Page vous pouvez cliquer sur l'onglet Themig pour voir quels styles sont utilisés, actuellement, il ressemble à ceci:

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

Ensuite, vous pouvez utiliser le jQuery UI CSS Framework documentation pour trouver une description de chaque général classe. Les classes spécifiques au widget ne sont pas listées, car elles sont bien ... par-widget. La meilleure façon d'avoir une idée de ce que ces classes font est d'utiliser ThemeRoller, ou regardez le thème par défaut (for example here) et regardez simplement le CSS pour ces classes, vous pouvez utiliser juste cela et ajuster pour votre propre besoins, voici le thème de base actuel CSS pour les classes .ui-tabs-*:

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