Default tabs appearance.
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs without the list background.
Show CSS
#tabs-nobg {
padding: 0px;
}
#tabs-nobg .ui-tabs-nav {
background: transparent;
border-width: 0px 0px 1px 0px;
-moz-border-
radius: 0px;
-webkit-
border-radius: 0px;
border-
radius: 0px;
}
#tabs-nobg .ui-tabs-panel {
margin: 0em 0.2em 0.2em 0.2em;
}
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs without the header background.
Show CSS
#tabs-nohdr {
padding: 0px;
background: none;
border-width: 0px;
}
#tabs-nohdr .ui-tabs-nav {
padding-left: 0px;
background: transparent;
border-width: 0px 0px 1px 0px;
-moz-border-
radius: 0px;
-webkit-
border-radius: 0px;
border-
radius: 0px;
}
#tabs-nohdr .ui-tabs-panel {
background: #f5f3e5 url
(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-
bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top;
border-width: 0px 1px 1px 1px;
}
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Minimalist tabs.
Show CSS
#tabs-min {
background: transparent;
border: none;
}
#tabs-min .ui-widget-header {
background: transparent;
border: none;
border-bottom: 1px solid #c0c0c0;
-moz-
border-radius: 0px;
-webkit-
border-radius: 0px;
border-
radius: 0px;
}
#tabs-min .ui-tabs-nav .ui-state-default
{
background: transparent;
border: none;
}
#tabs-min .ui-tabs-nav .ui-state-active {
background: transparent url
(img/uiTabsArrow.png) no-repeat bottom center;
border: none;
}
#tabs-min .ui-tabs-nav .ui-state-default a {
color: #c0c0c0;
}
#tabs-min .ui-tabs-nav .ui-state-active a {
color: #459e00;
}
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs with smaller non-selected tabs.
Show CSS
#tabs-smaller .ui-
tabs-nav li
{
margin-
top: 0.6em;
font-size: 80%;
}
#tabs-smaller .ui-
tabs-nav li.ui-tabs-selected,
#tabs-smaller .ui-
tabs-nav li.ui-state-active {
margin-top: 0em;
font-size: 100%;
}
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs with icons.
Show CSS
#tabs-icons .ui-tabs-nav .ui-icon {
display: inline-block;
}
Show HTML
<div id="tabs-
icons" class="tabs">
<ul>
; <li><a href="#tabs-
icons-1">
; <span class="ui-
icon ui-icon-flag"></span> First</a>
&
nbsp; </li>
...
</ul>
...&nb
sp;
</div>
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs like buttons.
Show CSS
#tabs-buttons .ui-
tabs-nav {
padding: 0em;
background: transparent;
border-width: 0px;
}
#tabs-buttons .ui-
tabs-nav li
{
position: static;
margin: 0px;
border-bottom: 1px solid #327e04 !
important;
-moz-border-radius: 0px;
-webkit-
border-radius: 0px;
border-
radius: 0px;
}
#tabs-buttons .ui-
tabs-nav li:first-child
{
-moz-border-radius: 6px 0px 0px 6px;
-webkit-
border-radius: 6px 0px 0px 6px;
border-
radius: 6px 0px 0px 6px;
}
#tabs-buttons .ui-
tabs-nav li:last-child
{
-moz-border-radius: 0px 6px 6px 0px;
-webkit-
border-radius: 0px 6px 6px 0px;
border-
radius: 0px 6px 6px 0px;
}
#tabs-buttons .ui-
tabs-nav li.ui-tabs-selected
{
padding-
bottom: 0px;
border-bottom: 1px solid #d4ccb0 !important;
}
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Centred tabs.
Show CSS
#tabs-centre .ui-tabs-nav {
height: 2.35em;
text-align: center;
}
#tabs-centre .ui-tabs-nav li
{
display: inline-block;
float: none;
top: 0px;
margin: 0em;
}
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs aligned right.
Show CSS
#tabs-to-right .ui-tabs-nav
{
float: right;
border-left: none;
-moz-border-
radius: 0px 6px 6px 0px;
-webkit-
border-radius: 0px 6px 6px 0px;
border-
radius: 0px 6px 6px 0px;
}
#tabs-to-right .tabs-
background
{
height: 2.6em;
background: #ece8da url
(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-
bg_gloss-wave_100_ece8da_500x100.png) repeat-x scroll 50% 50%;
border: 1px solid #d4ccb0;
-moz-
border-radius: 6px;
-webkit-
border-radius: 6px;
border-
radius: 6px;
}
This implementation also requires the addition of a background div before the tab content.
Show HTML
<div class="tabs">
<ul>
; ...
</ul>
<div class="tabs-
background"></div>
...&n
bsp;
</div>
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs at the bottom.
Show CSS
#tabs-bottom
{
position: relative;
padding-bottom: 3em;
}
#tabs-bottom .ui-tabs-nav {
position: absolute;
left: 0.25em;
right: 0.25em;
bottom: 0.25em;
padding: 0em 0.2em 0.2em;
}
#tabs-bottom .ui-tabs-nav li
{
border-
top: none;
border-bottom: 1px solid #ccc;
-moz-border-
radius: 0px 0px 4px 4px;
-webkit-
border-radius: 0px 0px 4px 4px;
border-
radius: 0px 0px 4px 4px;
}
#tabs-bottom .ui-tabs-nav li.ui-tabs-selected,
#tabs-bottom .ui-tabs-nav li.ui-state-active {
top: -1px;
}
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs on the left.
Show CSS
#tabs-left {
position: relative;
padding-left: 6.5em;
}
#tabs-left .ui-tabs-nav {
position: absolute;
left: 0.25em;
top: 0.25em;
bottom: 0.25em;
width: 6em;
padding: 0.2em 0 0.2em 0.2em;
}
#tabs-left .ui-tabs-nav li
{
right: 1px;
width: 100%;
border-right: none;
border-bottom-width: 1px !
important;
-moz-border-radius: 4px 0px 0px 4px;
-webkit-
border-radius: 4px 0px 0px 4px;
border-
radius: 4px 0px 0px 4px;
overflow: hidden;
}
#tabs-left .ui-tabs-nav li.ui-tabs-selected,
#tabs-left .ui-tabs-nav li.ui-state-active {
border-right: 1px solid transparent;
}
#tabs-left .ui-tabs-nav li a
{
float: right;
width: 100%;
text-align: right;
}
#tabs-left > div {
height: 35em;
}
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Tabs on the right.
Show CSS
#tabs-right {
position: relative;
padding-right: 6.5em;
}
#tabs-right .ui-tabs-nav {
position: absolute;
right: 0.25em;
top: 0.25em;
bottom: 0.25em;
width: 6em;
padding: 0.2em 0.2em 0.2em 0em;
}
#tabs-right .ui-tabs-nav li
{
width: 100%;
border-left: none;
border-bottom-width: 1px !
important;
-moz-border-radius: 0px 4px 4px 0px;
-webkit-
border-radius: 0px 4px 4px 0px;
border-
radius: 0px 4px 4px 0px;
overflow: hidden;
}
#tabs-right .ui-tabs-nav li.ui-tabs-selected,
#tabs-right .ui-tabs-nav li.ui-state-active {
left: -1px;
border-left: 1px solid transparent;
}
#tabs-right .ui-tabs-nav li a
{
width: 100%;
}
#tabs-right > div {
height: 33em;
}
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!
Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.
1st Tab
2nd Tab
3rd Tab
4th Tab
5th Tab
6th Tab
7th Tab
8th Tab
No comments:
Post a Comment