jQuery Tabs UI CSS...jQuery builder
Using jQuery builder, I used as my CSS Scope: .playertabs.
It created a folder in the CSS folder called playertabs.
In creating my DIV's for the tabs, I used Class=playertabs. From there, it should drill down and use the CSS page within the playertabs folder.
Sounds good, so far, right? Ultimately, I desire to use multiple Tab UI's on one page.
Here is my test page:
http://www.hoosierhoopsreport.com/test/index1.php
Here is the CSS code:
-
.playertabs .ui-tabs { padding: .2em; zoom: 1; }
.playertabs .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
.playertabs .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
.playertabs .ui-tabs .ui-tabs-nav li a {
float: left;
text-decoration: none;
padding-top: 0.5em;
padding-right: 1em;
padding-bottom: 0.5em;
padding-left: 1em;
}
.playertabs .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
.playertabs .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .playertabs .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .playertabs .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.playertabs .ui-tabs .ui-tabs-nav li a, .playertabs .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... */
.playertabs .ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
.playertabs .ui-tabs .ui-tabs-hide { display: none !important; }