Ad stopt er mee
Verschillende tabbladen zonder pagina verversen
Door Steven Hack, 19 jaar geleden, 8.257x bekeken
Laatst was ik op een site aan het rondsnuffelen die gebruik maakte van een navigatiebalk met vier menu knoppen. Daartussen kon je zeg maar tabben voor andere informatie.
Het irritante was dat de site daar elke keer opnieuw voor geladen moest worden, en dan kan soms wel even duren.
Daarom kwam ik op het idee om dat op te lossen, en hierbij het resultaat.
De menu button is te vinden op: www.stevenhack.nl/Scripts/menubutton.gif
Dit leek me wel iets waar je veel mee zou kunnen doen, en wat je ook goed kunt toepassen in combinatie met php.
Voor het javascript gedeelte gaat de eer naar WillemJan Z en Barry. Die hebben mij op weg geholpen met dit handige script.
EDIT: Het probleem met de pointer cursor in IE is op te lossen door het volgende toe te voegen: onMouseOver="this.style.cursor='hand'" Dit heb ik nu ook toegevoegd in de code en het voorbeeld.
Voorbeeld: http://www.stevenhack.nl/Scripts/tabbladen.php
Gesponsorde koppelingen
PHP script bestanden
Er zijn 25 reacties op 'Verschillende tabbladen zonder pagina verversen'
0 
-0 
-0
Voorbeeld moet zijn zonder hoofdletter volgens mij: http://www.stevenhack.nl/tabbladen.php
edit: verder zou ik een cursor/pointer op je menu zetten. Het is nu onduidelijk dat het een menu is wat werkt.
Verdere verbeteringen zouden ook nu kunnen zijn, bijvoorbeeld een loading / laad balk. Zodat bezoekers ook zien, dat de pagina ververst.
Want dat zie je nu ook niet heel duidelijk. Succes!
edit: verder zou ik een cursor/pointer op je menu zetten. Het is nu onduidelijk dat het een menu is wat werkt.
Verdere verbeteringen zouden ook nu kunnen zijn, bijvoorbeeld een loading / laad balk. Zodat bezoekers ook zien, dat de pagina ververst.
Want dat zie je nu ook niet heel duidelijk. Succes!
0 -0
-0
@Chupskie: Het hele principe aan dit script is dat de pagina niet ververst. En de cursor/pointer werkt in IE niet. Hoe dit is op te lossen ben ik nog aan het opzoeken. Bedankt voor de tip over het voorbeeld.
@Tommy: Een framework lijkt me overbodig voor zo'n simpel script?
@Tommy: Een framework lijkt me overbodig voor zo'n simpel script?
0 -0
-0
maak even een handje ofzo als je erover gaat, het is zo heel onduidelijk
Edit:
Ik zie dat je zei dat het niet werkte, sorry[/EDIT]
0 -0
-0
@Aapjuh: dan kun je wel makkelijk selectors gebruiken en hoef je niet zo slordig JS in je HTML te zetten.
0 -0
-0
@Toby: Zoals je kunt zien is dit toch veel eenvoudiger voor beginners en is hier minder javascript van toepassing.
@Tommy: Wat is hier slordig aan? Je kunt namelijk het ook nog altijd in een apart bestand zetten net zoals met css files.
@Tommy: Wat is hier slordig aan? Je kunt namelijk het ook nog altijd in een apart bestand zetten net zoals met css files.
0 -0
-0
Ook al eens gedaan, zonder inline scripts, maar 13 regels Javascript.
http://www.phphulp.nl/php/tutorials/8/592/1568/
http://www.phphulp.nl/php/tutorials/8/592/1568/
0 -0
-0
Tja alleen gebruik jij mootools, en ik hier niet. En er zijn nog wat meer verschillen.
Verder kan ik me niet herinneren dat ik vroeg om gelijknamige scripts?
En zoals je ziet gebeurt het hier in 10 regels?
Dus in plaats van dit topic te gebruiken om je eigen scripts/tutorials aan te bieden, zou je je misschien op dit script kunnen focussen. Bij voorbaat dank.
Verder kan ik me niet herinneren dat ik vroeg om gelijknamige scripts?
En zoals je ziet gebeurt het hier in 10 regels?
Dus in plaats van dit topic te gebruiken om je eigen scripts/tutorials aan te bieden, zou je je misschien op dit script kunnen focussen. Bij voorbaat dank.
0 -0
-0
Ach, het is altijd goed verschillende dingen bij elkaar te hebben zodat iedereen een gedegen keus kan maken. Ik voel hier een beetje een nare toon in je berichtje aapjuh ;)
0 -0
-0
Klopt inderdaad ook, maar het enige wat ik hier van ze zie is: Dit heb ik ook! *link*
Als het iets in de aard was van, hmm leuke methode maar het kan ook zo: *link* of iets dergelijks oké. Maar wat kan ik hier verder mee? vrij weinig lijkt me. Tenzij ik zelf ga kijken hoe hun het hebben gedaan.
Als het iets in de aard was van, hmm leuke methode maar het kan ook zo: *link* of iets dergelijks oké. Maar wat kan ik hier verder mee? vrij weinig lijkt me. Tenzij ik zelf ga kijken hoe hun het hebben gedaan.
0 -0
-0
@ aapjuh: Tommy doelt juist op de onClick attributen. Dat is niet netjes, of wordt als niet netjes beschouwd omdat het daardoor juist minder makkelijk wordt om het te beheren en aan te passen later.
Je kunt namelijk ook dit doen:
met Mootools (of jQuery/dojo/YUI vast ook wel) kan je gewoon zoiets doen:
dat is juist het handige aan selectors, het werkt namelijk precies als de css selectors, dus is het heel makkelijk te begrijpen, want iedere webdeveloper kent wel css, dus is het nóg duidelijker ;)
Je kunt namelijk ook dit doen:
Code (php)
1
document.getElementById('..').onclick = function(){ /* ... */}
met Mootools (of jQuery/dojo/YUI vast ook wel) kan je gewoon zoiets doen:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
var tabbladen = $$('.tabs div');
$$('li a.list').each(function(tab,index){
tab.addEvent('click',function(){
tabbladen.setStyle('display','none');
tabbladen[index].setStyle('display','block');
});
});
$$('li a.list').each(function(tab,index){
tab.addEvent('click',function(){
tabbladen.setStyle('display','none');
tabbladen[index].setStyle('display','block');
});
});
dat is juist het handige aan selectors, het werkt namelijk precies als de css selectors, dus is het heel makkelijk te begrijpen, want iedere webdeveloper kent wel css, dus is het nóg duidelijker ;)
0 -0
-0
Hmm bedankt daarvoor Arian, zal me er eens in verdiepen.
@Tommy: Heb ik dat hier ergens gezegd? Volgens mij ging het juist erom dat dit simpel is, en volgens mij staat het daarom ook bij beginners. Niet iedereen is meteen zo goed als jouw :)
@Tommy: Heb ik dat hier ergens gezegd? Volgens mij ging het juist erom dat dit simpel is, en volgens mij staat het daarom ook bij beginners. Niet iedereen is meteen zo goed als jouw :)
0 -0
-0
@aapjuh: als je nu eens begint met minder chagrijnig te reageren, kom je al een stuk positiever over. Overigens werkt het voorbeeld bij mij niet?
0 -0
-0
Wat werkt er precies niet? De gehele link?
Bij mij werkt het nog steeds prima, heb je javascript wel aanstaan, aangezien dat wel nodig is. Zoja, welke browser/versie gebruik je?
Bij mij werkt het nog steeds prima, heb je javascript wel aanstaan, aangezien dat wel nodig is. Zoja, welke browser/versie gebruik je?
0 -0
-0
Ik vind Tommy de gene die hier chagrijnig reageert. aapjuh is een schattig aapje en doet niks mis :(
Het is sowieso onnodig om een JS library te gebruiken.. HELL waarom bestaat zoiets! Alleen maar onhandig en het is een groot bestand om te laden en je moet weer allerlei functies leren om het te gebruiken.
Aap: mooi gedaan.
Het is sowieso onnodig om een JS library te gebruiken.. HELL waarom bestaat zoiets! Alleen maar onhandig en het is een groot bestand om te laden en je moet weer allerlei functies leren om het te gebruiken.
Aap: mooi gedaan.
0 -0
-0
Ik vind het wel een leuk scriptje. Zeker handig voor mensen die nog niet heel veel zijn.
@Dragy, Javascript framework zijn vaak wel de moeite waard. Als je kijkt naar ontwikkeltijd en beheerbaarheid, vooral ook om dingen crossbrowser en standaarden kijkt, dan is het bijna een must. Je kunt er meestal ook slim mee cachen, waardoor je juist snelheid bespaart. Een iets groter beginbestand is niet erg als je de HTTP headers goed regelt. Maar voor kleine websites is het vaak alleen maar overhead ja.
@Dragy, Javascript framework zijn vaak wel de moeite waard. Als je kijkt naar ontwikkeltijd en beheerbaarheid, vooral ook om dingen crossbrowser en standaarden kijkt, dan is het bijna een must. Je kunt er meestal ook slim mee cachen, waardoor je juist snelheid bespaart. Een iets groter beginbestand is niet erg als je de HTTP headers goed regelt. Maar voor kleine websites is het vaak alleen maar overhead ja.
0 -0
-0
Oh, nu werkt het wel weer. Ik vind het maar een beetje een vermakkelijkt script, waardoor het niet veel lijkt. Dat is het ook eigenlijk niet, maar als je nu met zo'n JS library iets in elkaar had gezet; had dat er vast veel professioneler eruit gezien.
0 -0
-0
Leuk simpel scriptje. Enige redenen waarom ik hem niet op m'n website zou willen:
Je hebt geen aparte landingspagina. Als ik het 2e tablad als favoriet wil toevoegen, ben ik verplicht om eerst de eerste pagina te bekijken. Reken maar, dat ik liever een keer een extra pagina moet herladen, om van pagina te verwisselen, dan dat ik niet kan deeplinken.
Verder is dit ook niet echt google vriendelijk. Alles staat op 1 pagina, dus in je URL kan je al geen onderscheid meer maken tussen de verschillende onderwerpen, die worden beschreven.
Zelf zou ik eerder AJAX gebruiken, met de echte link, gecombineerd met een onclick waarbij de ajax functie wordt geladen, en vervolgen een return false wordt meegegeven, die voorkomt dat de link gevolgt wordt, wanneer javascript enabled is.
Trouwens wel jammer, dat je alles met kleine letters hebt geschreven, en eigenlijk een nette xhtml valid codering gebruikt, en er dan vervolgens een 'onMouseOver' met hoofdletters tegen aan te gooien. ;)
Je hebt geen aparte landingspagina. Als ik het 2e tablad als favoriet wil toevoegen, ben ik verplicht om eerst de eerste pagina te bekijken. Reken maar, dat ik liever een keer een extra pagina moet herladen, om van pagina te verwisselen, dan dat ik niet kan deeplinken.
Verder is dit ook niet echt google vriendelijk. Alles staat op 1 pagina, dus in je URL kan je al geen onderscheid meer maken tussen de verschillende onderwerpen, die worden beschreven.
Zelf zou ik eerder AJAX gebruiken, met de echte link, gecombineerd met een onclick waarbij de ajax functie wordt geladen, en vervolgen een return false wordt meegegeven, die voorkomt dat de link gevolgt wordt, wanneer javascript enabled is.
Trouwens wel jammer, dat je alles met kleine letters hebt geschreven, en eigenlijk een nette xhtml valid codering gebruikt, en er dan vervolgens een 'onMouseOver' met hoofdletters tegen aan te gooien. ;)
0 -0
-0
Hmm dat ligt eraan lapidi, Je zou in de div's met php pagina's kunnen excluden. zodat je het effect dat je in mozilla hebt met tabbladen krijgt. Bijvoorbeeld.
Die onMouseOver heb ik niet zelf getypt maar letterlijk gekoppieerd van google (A) daar zal het aan liggen. Dat is ook niet goed, maar vooruit :P
Jezpur, hoe bedoel je professioneler? Ik wil met opzet geen rare effecten of overgangen als je dat bedoelde?
Die onMouseOver heb ik niet zelf getypt maar letterlijk gekoppieerd van google (A) daar zal het aan liggen. Dat is ook niet goed, maar vooruit :P
Jezpur, hoe bedoel je professioneler? Ik wil met opzet geen rare effecten of overgangen als je dat bedoelde?
0 -0
-0
Leuk script, goed gemaakt en simpel. Het is juist handig dat hier geen javascript framework voor wordt gebruikt. Scripts kunnen altijd beter, maar op die mouseover na ziet dit er heel goed uit! Ik zou het niet gebruiken omdat ik in frontendwebsites liever zo weinig mogelijk javascript gebruik, maar voor een backend zou het wel handig zijn.
0 -0
-0
Prima script hoor, er zijn er echter al zoveel van. En zoals al eerder gezegt: iets met AJAX zou mooier zijn. Nog een puntje van kritiek: "Welkom op mijn persoonlijke site. Ik gebruik deze site voor persoonlijke doeleinden, zoals html, css, java en php projecten maar ook foor school projecten. Geniet van je verblijf!" staat op je site. "foor", ernstig...
0 -0
-0
Denk dat je niet echt veel aan dit script hebt, voor zover ik het kan zien kan hij namelijk geen 2 , los van elkaarstaande, groepen met tabbladen aan. Verder is het een beetje nutteloos om elke keer alles te doorlopen, dit omdat je script niet dynamisch is en dus per definitie , in deze vorm, niet bruikbaar om dynamisch in te zetten.
0 -0
-0
ik zou bij de buttons toch een muis over maken dat ziet er veel beter uit verder ben ik het volkomen eens met Jacco Engel
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu