如果你看看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; }
爲什麼jQuery UI css會破壞你的樣式?除非你使用相同的類名? – Reigel 2010-08-03 01:09:52
「ruin」==「衝突」 – EBM 2010-08-03 03:17:11
要更改標題背景,請使用:.ui-widget-header {0} {0} 背景:橙色; font-weight:bold; } – 2012-12-08 02:01:25