jQuery UI选项卡最小样式

Question

在我的应用程序中，迄今为止我都避免需要加载任何jQuery样式表，但UI标签插件似乎需要一些CSS才能工作。好的，很好，但是例子中有你加载所有的UI风格，也许更重要的是，标签风格完全毁了我自己的外观和感觉。

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

我不介意少量的造型帮助很好地安排标签或什么东西，但背景图像，颜色......他们与我自己的造型非常不好。

哦，也不用感谢主题辊，我相信这对一些人来说是很好的。只是在这种情况下，谢谢。

Answer 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找到每一个描述一般班。小部件特定的类没有列出，因为它们很好...每个小部件。

想要了解这些类的功能的最好方法是使用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; }