Onglets de l'interface utilisateur jQuery Minimal Styling

Dans mon application, j'ai évité jusqu'à présent de devoir charger jQuery les feuilles de style, mais la UI-tabs plugin semble avoir besoin d'un peu de CSS pour fonctionner. OK, très bien, mais les exemples avez-vous charger l'INTERFACE utilisateur de styles et de, peut-être plus important, l'onglet style totalement ruines de mon propre look et la sensation.

Est-il un endroit pour apprendre comment je peux fournir juste assez de CSS pour les onglets de travail, de sorte que je peux conserver mon propre style?

Je n'ai pas l'esprit d'un montant minimal de style vous aider à organiser les onglets de bien ou quelque chose, mais l'image d'arrière-plan, les couleurs.... elles s'affrontent vraiment mal avec mon propre style.

Oh, et ce n'est pas grâce à le Thème du Rouleau, qui je suis sûr est agréable pour certaines personnes. Tout simplement pas dans ce cas, merci.

source d'informationauteur EBM

  1. 8

    Si vous regardez la Onglets De La Page De Démonstration vous pouvez cliquer sur le Themig onglet pour afficher les styles sont en cours d'utilisation, 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 de trouver une description de chaque général classe. Le widget des classes spécifiques ne sont pas dans la liste, car ils sont bien...par widget.

    Le meilleur moyen de se faire une idée de ce que ces classes n'est à utiliser ThemeRoller, ou de regarder le thème par défaut (par exemple ici) et il suffit de regarder le CSS pour ces classes, vous pouvez utiliser et adapter à vos propres besoins, voici l'actuelle base de CSS du thème pour .ui-tabs-* classes:

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