Tutorials :: Javascript > Navigation > Registerkarten-Navigation
[Beispiel]   [Download]   [Schulnote: 3.41 aus 123 Bewertungen]
 Bewerten: 
6

5

4

3

2

1
Das ist der Code für einen Block von Registern.
Breite und Inhalt kann hier direkt geändert werden:










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:










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:










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:










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:










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;
}