vertikale tabs implementiert und testweise eingefügt

This commit is contained in:
Hendrik Fellerhoff 2012-03-21 02:54:33 +01:00
parent 5820b94859
commit 7c554a610d
2 changed files with 49 additions and 2 deletions

View File

@ -71,9 +71,11 @@
}); });
}); });
$(document).ready(function() {
$("#tabs").tabs();
$("#v-tabs").tabs().addClass('ui-tabs-vertical');
$( "#tabs" ).tabs({ cookie: { expires: 1 } }); });
} }
); );
@ -91,6 +93,20 @@
<li><a href="#tabs-5">Raum 4</a></li> <li><a href="#tabs-5">Raum 4</a></li>
</ul> </ul>
<div id="tabs-1"> <div id="tabs-1">
<div id="v-tabs" class="inner-tabs-container">
<ul>
<li><a href="#v-tabs-1">Licht</a></li>
<li><a href="#v-tabs-2">Musik</a></li>
</ul>
<div id="v-tabs-1">
Liiiiiichtsteuerung
</div>
<div id="v-tabs-2">
Muuuusik
</div>
</div>
<div class="buzzer"> <div class="buzzer">
<span class="circle red">Auf</span> <span class="circle red">Auf</span>
<button>Buzzern</button> <button>Buzzern</button>

View File

@ -2,6 +2,7 @@
#tabs { #tabs {
height: 500px; height: 500px;
width: 700px;
} }
.circle { .circle {
@ -22,4 +23,34 @@
.buzzer { .buzzer {
width: 95px; width: 95px;
}
.inner-tabs-container {
position: relative;
width: 530px;
height: 400px;
left: 120px;
top: 400px;
margin-top: -400px;
}
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical .ui-tabs-nav {
-moz-transform: rotate(-90deg) translate(0, 100%);
-moz-transform-origin: 0% 100%;
-o-transform: rotate(-90deg) translate(0, 100%);
-o-transform-origin: 0% 100%;
-webkit-transform: rotate(-90deg) translate(0, 100%);
-webkit-transform-origin: 0% 100%;
transform: rotate(-90deg) translate(0, 100%);
transform-origin: 0% 100%;
width: 400px;
top: 358px;
position: relative;
left: -4px;
margin-bottom: -46px !important;
}
.ui-tabs-vertical .ui-tabs-panel {
margin-left: 50px;
} }