Styles für Schwarzen kreis und Lampel, wenn man bei Lampel auf die Kreise klickt, werden togglen sie schwarz<->farbe

This commit is contained in:
Hendrik Fellerhoff 2012-03-21 03:22:28 +01:00
parent 129c0d53bd
commit 493231cd0d
2 changed files with 36 additions and 1 deletions

View File

@ -74,7 +74,13 @@
$(document).ready(function() { $(document).ready(function() {
$("#tabs").tabs(); $("#tabs").tabs();
$("#v-tabs").tabs().addClass('ui-tabs-vertical'); $("#v-tabs").tabs().addClass('ui-tabs-vertical');
$(".lampel .circle").click(function() {
if($(this).hasClass('black')){
$(this).removeClass('black');
} else {
$(this).addClass('black');
}
});
}); });
} }
); );
@ -97,6 +103,7 @@
<ul> <ul>
<li><a href="#v-tabs-1">Licht</a></li> <li><a href="#v-tabs-1">Licht</a></li>
<li><a href="#v-tabs-2">Musik</a></li> <li><a href="#v-tabs-2">Musik</a></li>
<li><a href="#v-tabs-3">Lampel</a></li>
</ul> </ul>
<div id="v-tabs-1"> <div id="v-tabs-1">
Liiiiiichtsteuerung Liiiiiichtsteuerung
@ -106,6 +113,15 @@
Muuuusik Muuuusik
</div> </div>
<div id="v-tabs-3">
<div class="lampel">
<span class="circle red"></span>
<span class="circle yellow"></span>
<span class="circle green"></span>
</div>
</div>
</div> </div>
<div class="buzzer"> <div class="buzzer">
<span class="circle red">Zu</span> <span class="circle red">Zu</span>

View File

@ -28,6 +28,14 @@ body {
background-color: green; background-color: green;
color: #ffffff; color: #ffffff;
} }
.circle.yellow {
background-color: #ffed4c;
color: #000000;
}
.circle.black {
background-color: #000000;
color: #ffffff;
}
.buzzer { .buzzer {
width: 95px; width: 95px;
@ -42,6 +50,17 @@ body {
margin-top: -400px; margin-top: -400px;
} }
.lampel {
border: 2px solid white;
padding: 15px;
height: 64px;
width: 204px;
margin: 0 auto;
}
.lampel .circle {
display: inline-block;
margin: 0px;
}
/* Vertical Tabs /* Vertical Tabs
----------------------------------*/ ----------------------------------*/
.ui-tabs-vertical .ui-tabs-nav { .ui-tabs-vertical .ui-tabs-nav {