jQuery UI选项卡最小样式

Question

在我的应用程序中,我到目前为止都避免需要加载任何jQuery样式表,但UI-tabs插件似乎需要一些CSS才能工作.好的,很好,但是这些示例可以加载所有UI样式,或许更重要的是,标签样式完全破坏了我自己的外观和感觉.

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

我不介意最小量的造型有助于很好地安排标签或其他东西,但背景图片,颜色......他们与我自己的造型冲突非常糟糕.

哦,不用了主题滚筒,我相信这对某些人来说很好.只是不在这种情况下,谢谢.

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 Framework文档来查找每个常规类的描述.特定于小部件的类没有列出,因为它们很好...每个小部件.

了解这些类所做的最好的方法是使用ThemeRoller,或者查看默认主题(例如这里),只看这些类的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; }