vertikale tabs implementiert und testweise eingefügt

src/main/webapp/WEB-INF/jsp/index.jsp

@@ -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>
         </ul>
         <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">
                 <span class="circle red">Auf</span>
                 <button>Buzzern</button>

src/main/webapp/resources/css/styles.css

@@ -2,6 +2,7 @@
 
 #tabs {
 	height: 500px;
+	width: 700px;
 }
 
 .circle {
@@ -23,3 +24,33 @@
 .buzzer {
     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;
+}