Denne webside er et yderligere eksperiment i forhold til menueksemplet eksempel 8 til artiklen CSS-formaterede menuer.
Idéen er, at når du klikker på en af fanerne, skal der vises et nyt faneblad under denne fane. Prøv det!
I modsætning til de fleste fanebladskonstruktioner forgår alt her på den samme webside. De artikler, der ikke ses umiddelbart, er blot skjult. Klikkes der på en anden fane, skjules den aktuelle artikel og den ønskede artikel ses i stedet for, lige som fanen skifter til at have samme farve som fanebladet.
Disse artikler er en modernisering i 2008 af en gammel sag, jeg haft liggende fra før århundredskiftet. Det er ikke længere en hensigtsmæssig konstruktion og jeg har nedlagt den webside, der beskriver den.
Denne konstruktion omfatter én webside med fem artikler, der vises ved et klik på det faneblad, der vedrører det emne, der er nævnt i fanen.
Applikationen beror på en ret præcis formatering af fane-elementerne sat via en JavaScript ændring af disse elementer ved et klik på en af fanerne.
Opdateret: 11. marts 2008
Alt indhold på siden er omsluttet af et element div#side:
div#side {width: 90%;max-width:50em;min-width:740px;
margin:0 auto;}
Dette element midtstilles i browservinduet og kan maksimalt blive 50 em bredt.
Inden for dette element er indsat 4 + 5 hovedelementer: Et sidehoved og en sidefod, fanerne, der udgør menuen samt et element #page, der rummer de fem faneblade. I #page-elementet indsættes de fem artikler, hvoraf kun én er synlig til hver en tid. For at kunne opnå dette skal hvert af de fem artikler have en id.
Fanerne dannes af følgende HTML-kode:
<ul class="menu"> <li><a id="tab1" href="/" tabindex="1" onclick="visPanel(1);return false;">Fanebladsmenu</a></li> <li><a id="tab2" href="/" tabindex="2" onclick="visPanel(2);return false;">HTML-kode</a></li> <li><a id="tab3" href="/" tabindex="3" onclick="visPanel(3);return false;">Stylesheet</a></li> <li><a id="tab4" href="/" tabindex="4" onclick="visPanel(4);return false;">JavaScript</a></li> <li><a id="tab5" href="/" tabindex="5" onclick="visPanel(5);return false;">Bemærkninger</a></li> </ul>
Hvert af fanebladene er en div i sig selv, med følgende egenskaber:
<div id="panel5" class="panel"> <h1>Bemærkninger</h1> <p>Fanebladets tekst</p> </div>
Hver fane og hvert faneblad er forsynet med en unik ID, hvor sidste tegn
er et tal fra 1 til 5 (tab1 til tab5 hhv. panel1 til panel5). Det gør det
nemt at referere til lagene via JavaScript, som du kan se på fanebladet
med JavaScript-koden. Både faner og faneblade formateres i øvrigt via de
to fælles class-attributter,
som du kan se på gengivelsen af de relevante dele af stylesheet'et.
Opdateret: 11. marts 2008
I stylesheet'et herunder har jeg kun medtaget de formdeklarationer, der vedrører selve fanebladsdelen, og ikke formdeklarationerne for banneret foroven og footeren forneden.
ul.menu {
font-family:arial,sans-serif;
padding: 3px 0;
margin: 0;
padding-left:1.1em;
border-bottom: 1px solid #257;
font-size:90%;}
ul.menu li {list-style: none; margin: 0; display: inline;}
ul.menu li a {
padding: 3px 0.5em;
margin-right: 3px;
border: 1px solid #778;
background: #DDE;
text-decoration: none;
color:#000;}
.menu li a:visited {color: purple;}
ul.menu li a:hover, ul.menu li a:focus {color:#c00;}
.panel {display:block; /* Bem. OBS i teksten */
padding:0 1em 1em 1em;}
Bemærk den sidste formdeklaration der sætter alle artiklernes display-egenskab til block. Det betyder, at de er synlige dersom browseren ikke tolker JavaScript. Dermed er alle artiklerne synlige og læsbare for søgerobotter og skærmlæsere.
Opdateret: 11. marts 2008
Dynamikken i sagen ordnes ved hjælp af noget Javascript kode. Som du så på fanebladet med HTML-koden er der til hver fane knyttet et funktionskald på formen visPanel(nr), der passerer fanebladets nummer til funktionen. Funktionen kan du finde i gengivelsen af JavaScript-koden herunder.
Der første der sker, når siden er indlæst, er at onload event-handleren fyrer og udløser initialiseringsfunktionen init(). Denen funktion udfører som det første en reset af alting, det vil sidepanelerne skjules, idet deres display-værdi sættes til none, og alle farver sættes til deres standardværdier.
Dernæst sætter initialiseringsfunktionen baggrundsfarve og underkantens farve på fane1 og viser artiklen panel1.
Funktionen visPanel(nr), der udløses ved et klik på en fane, udfører også først en reset
for at skjule det det aktuelle faneblad og udfører derefter de funktioner, der skal til
for at ændre farver på fanen og vise den artikel, der svarer til det nummer, der passeres til
funktionen.
function resetColors(){
for (i=1;i<6;i++){
document.getElementById('panel' + i).style.display="none";
document.getElementById('panel' + i).style.backgroundColor="#fff";
document.getElementById('tab' + i).style.backgroundColor="#ddeeee";
document.getElementById('tab'+i).style.borderBottomColor="#257";
}
}
function init(){
resetColors();
document.getElementById('panel1').style.display="block";
document.getElementById('tab1').style.backgroundColor="#fff";
document.getElementById('tab1').style.borderBottomColor="#fff";
}
function visPanel(nr) {
resetColors();
panel=document.getElementById('panel'+nr).style;
fane=document.getElementById('tab'+nr).style;
panel.display="block";
fane.backgroundColor="#ffffff";
fane.borderBottomColor="#ffffff";
}
onload=init;
Opdateret: 11. marts 2008
Det, der er værd at bemærke ved denne applikation er, at i forhold til tilsvarende fra halvfemserne, hvor vi var nødt at at arbejde med fikserede størrelser på alting, er mængden af HTML- JavaScript- og CSS-kode reduceret ganske væsentligt.
Et layout som dette er nok bedst til et forholdsvis begrænset antal sider, og jeg tror også, at en del af effekten vil gå tabt, hvis indholdet af de enkelte faneblade bliver for omfangsrigt.
Skærmlayout af denne type er ikke helt sjældne, men de er som regel bygget op over en grafisk menu. Hvis man ellers er lidt fiks på fingrene med Photoshop er det klart, at det gøre meget mere elegant end dette eksperiment.
Denne udførelse har visse mangler, der kunne udbedres ved at lave en renere DOM-applikation. Manglerne viser sig for eksempel ved, at de egenskaber der sættes med JavaScript (eksempel fanernes baggrundsfarve) ikke kan ændres ved hjælp af et stylesheet, men kun ved onmouseover og onmouseout inline attributter.
Applikationen er dog en væsentlig forbedring af den tidligere 8 år gamle sag.
Hvis du ønsker at arbejde videre med denne konstruktion, har jeg lavet en zip til download. Denne fil indeholder HTML-kode, JavaScript og styleshet. Artikeltekster med videre er erstattet af mumletekst.
Opdateret: 11. marts 2008