如何自定义主题 jquery UI 选项卡（不使用 themeroller）

Question

我知道您可以使用 themeroller 来自定义您的 UI 主题，但是是否可以手动完成。 如果是，那么您必须遵循任何特定的CSS。 谢谢

Answer 1

当我浏览 Kieth Wood 的网站时，我也在寻找同样的答案：
http://keith-wood.name/uiTabs.html#tabs-min

您会发现他记录了几个选项，但简约选项卡对我来说是一个很好的起点。

Answer 2

是的，jquery-ui css 文件中有

：http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css

>     /* Tabs ----------------------------------*/
>     .ui-tabs { padding: .2em; zoom: 1; }
>     .ui-tabs .ui-tabs-nav { list-style: none; position: relative;
> padding: .2em .2em 0; }
>     .ui-tabs .ui-tabs-nav li { position: relative; float: left;
> border-bottom-width: 0 !important;
> margin: 0 .2em -1px 0; padding: 0; }
>     .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none;
> padding: .5em 1em; }
>     .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom:
> 1px; border-bottom-width: 0; }
>     .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; } /* first selector
> in group seems obsolete, but required
> to overcome bug in Opera applying
> cursor: text overall if defined
> elsewhere... */
>     .ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block;
> border-width: 0; background: none; }
>     .ui-tabs .ui-tabs-hide { display: none !important; }

但是，所需的是
.ui-tabs .ui-tabs-隐藏 {
显示：无；
}
来自 http://jqueryui.com/demos/tabs/

Answer 3

当然这是可能的（因为最终主题只是 CSS、图像和可能的 Javascript），但它不是很实用。 您可以采用现有主题并对其进行修改。 问题是有很多图像文件等您需要更改。 此外，许多文件的名称与颜色或其他相关变量相对应。

这实际上非常聪明，因为这意味着您可以在 CSS 和图像上放置一个未来的 Expires 标头，并且如果您更改主题，它仍然会正确更新。

因此，您可以保留文件名相同，但是如果您使用远期到期标头（您应该这样做），那么您就会遇到问题，而且它会让其他看到它的人感到困惑。 或者您必须更新所有这些文件和所有引用。

Themeroller 更加简单。