|
PHP Basics
• Administrationsbereich
• Counter
• Umfrage
• Kalender
• Kontaktformular
Javascript
• WebAudio Player
• WebAudio Player Singles
• Web-Farbmixer
• Beim Scrollen nachladen
Canvas
• Weihnachtskalender
• BCD Uhr
• Analog Anzeigeinstrument
• Drehregler
• Schieberegler
• Schiebeschalter
Navigation
• Registerkarten-Navigation
• Rotationsmenue
Animation & Spiele
• Warp-Flug
• Lichtjockey
HTML
• HTML 5 Grundgerüst
CSS
• Responsive Tabelle
|
| [Beispiel] [Download] |
Das ist der Code für einen Block von Registern.
Breite und Inhalt kann hier direkt geändert werden:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div style="width: 400px;">
<div style="width: 5px; height: 5px; margin: 0px; padding: 0px; float: left;"></div>
<div id="nRegisterButton_1_1" class="nRegisterButton" onclick="nRegisterSet(1, 1, 0);" onMouseOver="nRegisterOver('1_1', 1); nRegisterHinweis(1, 'Button 1_1');" onMouseOut="nRegisterOver('1_1', 0); nRegisterHinweis(1, '');">Button 1_1</div>
<div id="nRegisterButton_1_2" class="nRegisterButton" onclick="nRegisterSet(1, 2, 0);" onMouseOver="nRegisterOver('1_2', 1); nRegisterHinweis(1, 'Button 1_2');" onMouseOut="nRegisterOver('1_2', 0); nRegisterHinweis(1, '');">Button 1_2</div>
<div id="nRegisterButton_1_3" class="nRegisterButton" onclick="nRegisterSet(1, 3, 0);" onMouseOver="nRegisterOver('1_3', 1); nRegisterHinweis(1, 'Button 1_3');" onMouseOut="nRegisterOver('1_3', 0); nRegisterHinweis(1, '');">Button 1_3</div>
<div id="nRegisterHinweis_1" class="nRegisterHinweis"></div>
<div id="nRegisterContent_1_1" class="nRegisterContent"><div class="nRegisterInner">
Content Div 1_1
</div></div>
<div id="nRegisterContent_1_2" class="nRegisterContent"><div class="nRegisterInner">
Content Div 1_2<br><br><br><br><br><br><br><br><br><br><br><br>xxx
</div></div>
<div id="nRegisterContent_1_3" class="nRegisterContent"><div class="nRegisterInner">
Content Div 1_3<br><br><br><br>yyy
</div></div>
</div>
|
Nachfolgend ein zweiter Block mit angepassten IDs:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <br><br>
<div style="width: 400px;">
<div style="width: 5px; height: 5px; margin: 0px; padding: 0px; float: left;"></div>
<div id="nRegisterButton_2_1" class="nRegisterButton" onclick="nRegisterSet(2, 1, 0);" onMouseOver="nRegisterOver('2_1', 1); nRegisterHinweis(2, 'Button 2_1');" onMouseOut="nRegisterOver('2_1', 0); nRegisterHinweis(2, '');">Button 2_1</div>
<div id="nRegisterButton_2_2" class="nRegisterButton" onclick="nRegisterSet(2, 2, 0);" onMouseOver="nRegisterOver('2_2', 1); nRegisterHinweis(2, 'Button 2_2');" onMouseOut="nRegisterOver('2_2', 0); nRegisterHinweis(2, '');">Button 2_2</div>
<div id="nRegisterButton_2_3" class="nRegisterButton" onclick="nRegisterSet(2, 3, 0);" onMouseOver="nRegisterOver('2_3', 1); nRegisterHinweis(2, 'Button 2_3');" onMouseOut="nRegisterOver('2_3', 0); nRegisterHinweis(2, '');">Button 2_3</div>
<div id="nRegisterHinweis_2" class="nRegisterHinweis"></div>
<div id="nRegisterContent_2_1" class="nRegisterContent"><div class="nRegisterInner">
Content Div 2_1
</div></div>
<div id="nRegisterContent_2_2" class="nRegisterContent"><div class="nRegisterInner">
Content Div 2_2<br><br><br><br><br><br><br><br><br><br><br><br>xxx
</div></div>
<div id="nRegisterContent_2_3" class="nRegisterContent"><div class="nRegisterInner">
Content Div 2_3<br><br><br><br>yyy
</div></div>
</div>
|
Nun nur noch die externe Javascript- und CSS-Datei einbinden und initialisieren:
1
2
3
4
5
6
7
8
9
10
| <link type="text/css" href="registerkarten.css" rel="stylesheet">
<script type="text/javascript" src="registerkarten.js"></script>
<script language="javascript">
document.onload = nRegisterSet(1, 2, 3); // ( Gruppe, Start-Karte, Anzahl der Karten in Gruppe ) für Gruppe 1
document.onload = nRegisterSet(2, 3, 3); // ( Gruppe, Start-Karte, Anzahl der Karten in Gruppe ) für Gruppe 2
</script>
|
Die Javascript-Datei:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| var nRegNumArr = new Array();
var nRegActArr = new Array();
function nRegisterHinweis(Grp_Nr, text)
{
divHinweisId = 'nRegisterHinweis_'+Grp_Nr;
document.getElementById(divHinweisId).innerHTML = text;
}
function nRegisterOver(Grp_Nr, mode)
{
divOverId = 'nRegisterButton_'+Grp_Nr;
if( mode == 1 )
{
document.getElementById(divOverId).style.borderTop = '1px solid #FFA500';
document.getElementById(divOverId).style.borderLeft = '1px solid #FFA500';
document.getElementById(divOverId).style.borderRight = '1px solid #FFA500';
} else
{
document.getElementById(divOverId).style.borderTop = '1px solid #505050';
document.getElementById(divOverId).style.borderLeft = '1px solid #505050';
document.getElementById(divOverId).style.borderRight = '1px solid #505050';
}
}
function nRegisterSet(divGroup, divNumber, init)
{
if( init != 0 )
{
// init = Anzahl der Karten in Gruppe
nRegNumArr[divGroup] = init;
}
divSetId = 'nRegisterButton_'+divGroup+'_'+divNumber;
for( nr = 1; nr <= nRegNumArr[divGroup]; nr++ )
{
divButtonId = 'nRegisterButton_'+divGroup+'_'+nr;
divContentId = 'nRegisterContent_'+divGroup+'_'+nr;
if( divButtonId == divSetId )
{
document.getElementById(divButtonId).style.backgroundColor = '#FFFFFF';
document.getElementById(divButtonId).style.borderBottom = '1px solid #FFFFFF';
document.getElementById(divContentId).style.visibility = 'visible';
document.getElementById(divContentId).style.display = 'block';
} else
{
document.getElementById(divButtonId).style.backgroundColor = '#DCDCDC';
document.getElementById(divButtonId).style.borderBottom = '1px solid #505050';
document.getElementById(divContentId).style.visibility = 'hidden';
document.getElementById(divContentId).style.display = 'none';
}
}
nRegActArr[divGroup] = divNumber;
}
|
Die CSS-Datei:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| .nRegisterButton
{
padding: 5px;
margin-left: 0px;
margin-right: 5px;
margin-top: 3px;
margin-bottom: 0px;
float: left;
height: 15px;
text-align: center;
color: #000000;
background-color: #DCDCDC;
font-weight: normal;
cursor: pointer;
border-top: 1px solid #505050;
border-left: 1px solid #505050;
border-right: 1px solid #505050;
border-bottom: 1px solid #505050;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.nRegisterContent
{
/* height: 100px; */ /* konstante Höhe des Inhaltes */
visibility: hidden;
display: none;
width: 99%;
overflow: auto;
background-color: #FFFFFF;
border-top: 0px solid #505050;
border-left: 1px solid #505050;
border-right: 1px solid #505050;
border-bottom: 1px solid #505050;
}
.nRegisterInner
{
margin: 5px;
}
.nRegisterHinweis
{
line-height: 32px;
border-bottom: 1px solid #505050;
width: 99.2%;
height: 29px;
padding: 0px;
text-align: left;
}
|
|
|
