Nederlands Ondersteuningsforum :
Welkom op het Nederlandse Ondersteuningsforum van ActieForum.


Om ondersteuning te vragen of om in ťťn van onze andere forumsecties te kunnen posten dien je een account te hebben, bedankt voor het inloggen als je al geregistreerd bent, of registreer direct een account op ons ondersteuningsforum als je dit nog niet gedaan hebt.

Tabbladen binnen de pagina. (tutorial)

Vorige onderwerp Volgende onderwerp Go down

  • 0

Tabbladen binnen de pagina. (tutorial)

Bericht van VJ. op zo 27 feb 2011 - 15:30

Tabbladen binnen de pagina.

Lang heb ik ernaar gezocht, tabbladen op het portal, die het in combinatie met actieforum, ook echt doen.
Gelukkig heb ik gevonden wat ik zocht, en ik heb er een korte tutorial van gemaakt.

Wat zijn Tabs.
In (bijvoorbeeld) het portal kun je tabbladen binnen een pagina maken. Je kunt meer informatie weergegeven, en toch op dezelfde pagina blijven, zie onderstaande afbeelding:



Wanneer je op het bovenstaande tabblad klikt, opent zich een nieuw tabblad, binnen de pagina.
Zie onderstaande afbeelding.


De Tutorial. (4-stappen)

1. De links.
We beginnen met de links, de volgende code is hiervoor nodig.
Hierin staan de links naar de tabbladen.

Code:
<ul id="tabs">
 †<li><a href="#one">TITEL VAN TABBLAD</a></li>
 †<li><a href="#two">TITEL VAN TABBLAD</a></li>
 †<li><a href="#three">TITEL VAN TABBLAD</a></li>
 †<li><a href="#four">TITEL VAN TABBLAD</a></li>
 †<li><a href="#five">TITEL VAN TABBLAD</a></li>
</ul>

Je kunt er meer toevoegen door de volgende code te kopieren en aan te passen.
Je past het nummer aan bijv. six, seven, eight.

Code:
<li><a href="#six">TITEL VAN TABBLAD</a></li>

2. De inhoud.
Nu ga je de inhoud aanpassen, dus wat er in de tabbladen komt te staan.
Hiervoor gebruik je de volgende code, die je onder de bovenstaande code zet:

Code:
<div id="one" class="tabContent">
PLAATS HIER ALLES WAT IN DE PAGINA MOET KOMEN TE STAAN.
</div><

Zorg ervoor dat, div id="one", overeenkomt met de naam van het tabblad (one, two, tree, four, five, six)
Het nummer dat je eraan geeft, is het nummer waar de ''LINK'' aan vast zit.
Door voor elke LINK die je hebt gemaakt de bovenstaande code te gebruiken, maak je de inhoud compleet.
Zorg ervoor dat je iedere keer de, div id="two'', veranderd, zodat deze overeen komt met de LINK naar het tabblad.

3. De Lay-out.
De laatste stap is het aanpassen van de lay-out.
Je kunt de kleuren veranderen. Gebruik hiervoor de volgende code, en plak deze onder de bovenstaande code:

Code:
<style>
ul#tabs {
 font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
 font-size: 1.2em;
 list-style-type: none;
 margin: 10px 0 0 0;
 padding: 0;
 width: 300px;
}

ul#tabs li {
 float: left;
 padding: 0;
 margin: 0 2px 0 0;
}

ul#tabs li a {
 color: TEKSTKLEUR LINKS;
 margin: 0px;
 padding:5px 20px;
 background-color: ACHTERGRONDKLEUR LINKS;
 border-top: 6px KLEUR RAND OM LINKS solid;
 display: block;
}

ul#tabs li a:hover {
 color: TEKSTKLEUR MOUSEOVER;
 text-decoration: none;
}

ul#tabs li a.selected {
 color: #B5AD74;
 background-color: ACHTERGRONDKLEUR, GESELECTEERDE LINK;
 border-top: 3px RANDKLEUR GESELECTEERDE LINK solid;
 border-bottom: 3px RANDKLEUR GESELECTEERDE LINK solid;
}

div.tabContent {
 width: 570px;
 clear: left;
 border: 1px RANDKLEUR TABBLAD solid;
 padding: 10px;
 margin: 0;
}

div.tabContent.hide {
 display: none;
}</style>

4. Alles laten werken.
Nu je deze codes hebt, heb je nog een code nodig om alles te laten werken.
Dit is gewoon kopiŽren en plakken, je hoeft er verder niets aan te doen. Plak deze code onder de bovenstaande code:

Code:
<script>
var tabLinks = new Array();
 † †var contentDivs = new Array();

 † †onload = function init() {

 † † †// Grab the tab links and content divs from the page
 † † †var tabListItems = document.getElementById('tabs').childNodes;
 † † †for ( var i = 0; i < tabListItems.length; i++ ) {
 † † † †if ( tabListItems[i].nodeName == "LI" ) {
 † † † † †var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
 † † † † †var id = getHash( tabLink.getAttribute('href') );
 † † † † †tabLinks[id] = tabLink;
 † † † † †contentDivs[id] = document.getElementById( id );
 † † † †}
 † † †}

 † † †// Assign onclick events to the tab links, and
 † † †// highlight the first tab
 † † †var i = 0;

 † † †for ( var id in tabLinks ) {
 † † † †tabLinks[id].onclick = showTab;
 † † † †tabLinks[id].onfocus = function() { this.blur() };
 † † † †if ( i == 0 ) tabLinks[id].className = 'selected';
 † † † †i++;
 † † †}

 † † †// Hide all content divs except the first
 † † †var i = 0;

 † † †for ( var id in contentDivs ) {
 † † † †if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
 † † † †i++;
 † † †}
 † †}

 † †function showTab() {
 † † †var selectedId = getHash( this.getAttribute('href') );

 † † †// Highlight the selected tab, and dim all others.
 † † †// Also show the selected content div, and hide all others.
 † † †for ( var id in contentDivs ) {
 † † † †if ( id == selectedId ) {
 † † † † †tabLinks[id].className = 'selected';
 † † † † †contentDivs[id].className = 'tabContent';
 † † † †} else {
 † † † † †tabLinks[id].className = '';
 † † † † †contentDivs[id].className = 'tabContent hide';
 † † † †}
 † † †}

 † † †// Stop the browser following the link
 † † †return false;
 † †}

 † †function getFirstChildWithTagName( element, tagName ) {
 † † †for ( var i = 0; i < element.childNodes.length; i++ ) {
 † † † †if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
 † † †}
 † †}

 † †function getHash( url ) {
 † † †var hashPos = url.lastIndexOf ( '#' );
 † † †return url.substring( hashPos + 1 );
 † †}</script>

En nu heb je de tabbladen.
Je kunt de inhoud steeds weer bewerken. Heel handig.


VJ.
Medaille Forumlid
Medaille Forumlid

Oud Beheerder

Man Aantal berichten : 1284
Leeftijd : 24
Locatie : Twente
Registratiedatum : 19-08-10
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.ondersteun.actieforum.com
VJ. is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum