Javascript tab generator
Door Jos , 22 jaar geleden, 4.802x bekeken
Beschrijving:
Dit script maakt automagisch een "tab menu" aan voor alle div elementen
met als klassenaam tab.
Instructies:
Maak je pagina zoals je dat gewoonlijk ook doet, maar
bedenk van te voren welke gedeeltes tabs moeten worden.
Plaats deze tab gedeeltes onder elkaar:
Code (php)
1
2
3
2
3
<div class="tab">Tab inhoud voor tab 1</div>
<div class="tab">Tab inhoud voor tab 2</div>
etc..
<div class="tab">Tab inhoud voor tab 2</div>
etc..
Daarna gaan we bepalen waar het menu voor de tabs komt te staan.
Het menu wordt automagisch gevuld met de knoppen voor de tabs, dus
je hoeft alleen maar dit element te plaatsen op de plek waar je de tabs
wilt hebben staan.
Code (php)
1
<ul id="tabmenu"></ul>
Nu is het HTML gedeelte klaar en moeten we alleen nog
de tekst voor de tabs instellen, maar dit is optioneel.
Code (php)
1
var tabTexts = ['Home', 'Over ons', 'Gastenboek', 'Links', 'Downloads', 'Contact'];
Verander deze lijn naar je gewenste namen, of je kan de array leeg laten,
dan zet hij de standaard tekst "Tab N" er in.
Op en aanmerkingen welkom !
Voorbeeld: http://josbouma.awardspace.com/tabs/
Gesponsorde koppelingen
PHP script bestanden
Er zijn 10 reacties op 'Javascript tab generator'
0 
-0 
-0
Ooit gehoord van SEO? Want een zoekmachine kan hier niks mee.
Volgens mij kan dit ook met CSS - we kijken even naar Jan
Volgens mij kan dit ook met CSS - we kijken even naar Jan
0 -0
-0
Tuurlijk kan dit met CSS. Beetje met een list en wat opmaak. Goed te doen.
Elwin
Elwin
0 -0
-0
Dit is zelfs beter voor SEO omdat al je inhoud in een pagina staat,
dus prima uit te lezen door de crawler, maar ik heb dit
meer met forms in mijn achterhoofd geschreven.
Je zou van elke tab namelijk wel een stap kunnen maken,
zodat alles iets overzichtelijker overkomt.
dus prima uit te lezen door de crawler, maar ik heb dit
meer met forms in mijn achterhoofd geschreven.
Je zou van elke tab namelijk wel een stap kunnen maken,
zodat alles iets overzichtelijker overkomt.
0 -0
-0
Op die manier toepassen is trouwens wel chique! :)
(met die forms)
Overigens is met een lijst werken wel zo mooi, zowel voor de crawler (als jij het zegt .. ;)), maar ook voor de textbased browsers of screenreaders... Ik heb bijvoorbeeld even snel deze gemaakt en als je dan je CSS uitzet ziet het er nog steeds duidelijk uit.
Elwin
(met die forms)
Overigens is met een lijst werken wel zo mooi, zowel voor de crawler (als jij het zegt .. ;)), maar ook voor de textbased browsers of screenreaders... Ik heb bijvoorbeeld even snel deze gemaakt en als je dan je CSS uitzet ziet het er nog steeds duidelijk uit.
Elwin
0 -0
-0
Met css alleen heb je het nadeel dat <IE6 pseudo klasse hover niet support, dus ben je al weer gebonden aan javascript om dat op te vangen.
Je kan natuurlij ook voor elke tab een aparte pagina maken, de keuze is aan jou :)
Je kan natuurlij ook voor elke tab een aparte pagina maken, de keuze is aan jou :)
0 -0
-0
@ Jos: met IE is dat wel op te vangen hoor, kijk maar eens naar dit voorbeeld
0 -0
-0
@Jan,
Zonder htc kan ik ook wel een css parser (peterned) schrijven voor css en ie,
dat doe je gewoon met conditional compiling/comments of eventuele
object detectie in javascript.
Het komt er kort op neer dat javascript een krachtige scripting taal is die je met de moderne browser best mag gebruiken.
Zonder htc kan ik ook wel een css parser (peterned) schrijven voor css en ie,
dat doe je gewoon met conditional compiling/comments of eventuele
object detectie in javascript.
Het komt er kort op neer dat javascript een krachtige scripting taal is die je met de moderne browser best mag gebruiken.
0 -0
-0
Ik ben browser en kom op jouw site.
Ik zie keurig jouw div-jes met beschrijving (tot zover heb je gelijk).
Maar nu gaat alles fout want er zijn GEEN links. Oeps probleem. Ik zou dus nooit verder komen dan die ene pagina van je site.
En wat nu als je een text browser (lynx) hebt, of een aangepaste browser (voor slechtziende) b.v. een voorlees browser, een braille browser. Deze kunnen allemaal niet overweg met dit script.
JavaScript is een kractige taal die je zeker tegenwoordig best mag gebruiken; maar je moet hem alleen voor toegevoegde waarde gebruiken. Niet voor de basis van je site.
Ik zie keurig jouw div-jes met beschrijving (tot zover heb je gelijk).
Maar nu gaat alles fout want er zijn GEEN links. Oeps probleem. Ik zou dus nooit verder komen dan die ene pagina van je site.
En wat nu als je een text browser (lynx) hebt, of een aangepaste browser (voor slechtziende) b.v. een voorlees browser, een braille browser. Deze kunnen allemaal niet overweg met dit script.
JavaScript is een kractige taal die je zeker tegenwoordig best mag gebruiken; maar je moet hem alleen voor toegevoegde waarde gebruiken. Niet voor de basis van je site.
0 -0
-0
Webmakerij,
die links kun heel gemakkelijk toevoegen lijkt me?
Daarnaast kun je ook zo even een sitemap maken die
je keurig naar de juiste pagina en id brengt.
die links kun heel gemakkelijk toevoegen lijkt me?
Daarnaast kun je ook zo even een sitemap maken die
je keurig naar de juiste pagina en id brengt.
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu