jQuery UI 选项卡最小化样式答案

【问题标题】：jQuery UI Tabs Minimal StylingjQuery UI 选项卡最小化样式
【发布时间】：2011-03-24 12:05:00
【问题描述】：

在我的应用程序中，到目前为止，我完全避免需要加载任何 jQuery 样式表，但 UI-tabs 插件似乎需要一些 CSS 才能工作。好的，很好，但是这些示例让您加载了所有 UI 样式，也许更重要的是，选项卡样式完全破坏了我自己的外观。

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

我不介意少量的样式帮助以很好地安排选项卡或其他东西，但是背景图像，颜色....它们与我自己的样式冲突非常糟糕。

哦，不用感谢 Theme Roller，我相信这对某些人来说很不错。只是在这种情况下，谢谢。

【问题讨论】：

为什么 jQuery UI css 会破坏你的风格？除非你使用相同的类名？
要改变标题背景使用这个： .ui-widget-header { border: 0px solid #AAA/*{borderColorHeader}*/;背景：橙色；字体粗细：粗体； }

标签： jquery css jquery-ui jquery-ui-tabs jquery-tabs

【解决方案1】：

如果您查看Tabs Demo Page，您可以点击 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 Framework documentation 查找每个general 类的描述。未列出小部件特定的类，因为它们很好......每个小部件。

了解这些类的作用的最佳方法是使用 ThemeRoller，或者查看默认主题 (for example here)，然后查看这些类的 CSS，您可以使用它并根据您的需要进行调整自己的需要，这是.ui-tabs-*类的当前基本主题CSS：

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

【讨论】：