jQuery UI标签页的最小化样式设计

Question

在我的应用程序中，我迄今为止一直避免需要加载任何jQuery样式表，但UI-tabs插件似乎需要一些CSS才能正常工作。好的，很好，但示例让您加载所有UI样式，而且更重要的是，选项卡样式会完全破坏我的外观和感觉。

有没有什么地方可以学习如何提供足够的CSS让标签工作，以便我可以保留自己的样式？

我不介意提供最小量的样式帮助来整理标签等等，但背景图像，颜色......它们与我的样式非常冲突。

哦，对于Theme Roller，我不需要，我确定它对某些人很好。但在这种情况下，请不要使用。

- EBM

---

为什么jQuery UI的CSS会破坏你的样式？除非你使用相同的类名？ - Reigel Gallarde

要更改标题背景，请使用以下代码：.ui-widget-header { border: 0px solid #AAA/{borderColorHeader}/; background: orange; font-weight: bold; } - NoWar

Answer 1

如果您查看选项卡演示页面，您可以单击“ Themig ”选项卡以查看当前使用的样式，目前如下：

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

然后，您可以使用jQuery UI CSS框架文档查找每个通用类的描述。由于小部件特定类是基于小部件的，因此它们没有列出。

了解这些类的最佳方法是使用ThemeRoller，或查看默认主题(例如在这里)并查看这些类的CSS，您可以仅使用该CSS并根据自己的需求进行调整，以下是当前基础主题CSS中的.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; }

- Nick Craver