如何自定义主题的jQuery UI选项卡（不使用的ThemeRoller）

Question

我知道，你可以使用的ThemeRoller来定制你的UI主题，但有可能通过做手工。如果是，那么是那里，你必须遵循任何特定的CSS。谢谢

Answer 1

亚有在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-标签的.ui-标签隐藏{      显示：无; } 从 http://jqueryui.com/demos/tabs/

Answer 2

我一直在寻找同样的答案，当我遇到Kieth伍德的网站来： http://keith-wood.name/uiTabs.html#tabs-min

您会发现他记录了几个选项，但的标签极简的对我来说是很好的开始。

Answer 3

当然这是可能的（因为最后一个主题就是CSS，图像及可能的Javascript），但它不是很实用。你可以采取现有的主题，并对其进行修改。事情是有很多图像文件之类的东西你需要改变。另外，很多这些文件具有对应于颜色或其他相关变量的名称。

这实际上是非常聪明的，因为这意味着你可以把遥远的未来过期的CSS和图像标题，如果你更改主题它仍然正确地更新。

所以，你可以离开文件名相同，但这时如果使用的远期货你有一个问题Expires头（你应该），加上它会是混乱，别人谁走过来，看见它。或者你不得不更新所有这些文件和所有引用。

的ThemeRoller只是方式的方式更容易。