Javascript tab generator

Door Jos , 21 jaar geleden, 4.788x 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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<div class="tab">Tab inhoud voor tab 1</div>
<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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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

  1. javascript-tab-generator

 

Er zijn 10 reacties op 'Javascript tab generator'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Lissy Pixel
Lissy Pixel
21 jaar geleden
 
0 +1 -0 -1
Heel leuk en bedankt voor het delen!!!


21 jaar geleden
 
0 +1 -0 -1
Ooit gehoord van SEO? Want een zoekmachine kan hier niks mee.
Volgens mij kan dit ook met CSS - we kijken even naar Jan
Elwin - Fratsloos
Elwin - Fratsloos
21 jaar geleden
 
0 +1 -0 -1
Tuurlijk kan dit met CSS. Beetje met een list en wat opmaak. Goed te doen.

Elwin
Jos
Jos
21 jaar geleden
 
0 +1 -0 -1
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.
Elwin - Fratsloos
Elwin - Fratsloos
21 jaar geleden
 
0 +1 -0 -1
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
Jos
Jos
21 jaar geleden
 
0 +1 -0 -1
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 :)
Jan Koehoorn
Jan Koehoorn
21 jaar geleden
 
0 +1 -0 -1
@ Jos: met IE is dat wel op te vangen hoor, kijk maar eens naar dit voorbeeld
Jos
Jos
21 jaar geleden
 
0 +1 -0 -1
@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.


21 jaar geleden
 
0 +1 -0 -1
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.
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Jos
Jos
21 jaar geleden
 
0 +1 -0 -1
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.

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. javascript-tab-generator

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.