Verschillende tabbladen zonder pagina verversen

Door Steven Hack, 13 jaar geleden, 6.108x 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

  1. verschillende-tabbladen-zonder-pagina-verversen

 

Er zijn 25 reacties op 'Verschillende tabbladen zonder pagina verversen'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Davy Jansen
Davy Jansen
13 jaar geleden
 
0 +1 -0 -1
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!
Onbekend Onbekend
Onbekend Onbekend
13 jaar geleden
 
0 +1 -0 -1
Wat is het nut van geen framework gebruiken zoals jQuery?
Steven Hack
Steven Hack
13 jaar geleden
 
0 +1 -0 -1
@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?
Youri van Weegberg
Youri van Weegberg
13 jaar geleden
 
0 +1 -0 -1
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]
Toby hinloopen
toby hinloopen
13 jaar geleden
 
0 +1 -0 -1
Onbekend Onbekend
Onbekend Onbekend
13 jaar geleden
 
0 +1 -0 -1
@Aapjuh: dan kun je wel makkelijk selectors gebruiken en hoef je niet zo slordig JS in je HTML te zetten.
Steven Hack
Steven Hack
13 jaar geleden
 
0 +1 -0 -1
@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.
Harmen
Harmen
13 jaar geleden
 
0 +1 -0 -1
Ook al eens gedaan, zonder inline scripts, maar 13 regels Javascript.
http://www.phphulp.nl/php/tutorials/8/592/1568/
Steven Hack
Steven Hack
13 jaar geleden
 
0 +1 -0 -1
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.
Crispijn -
Crispijn -
13 jaar geleden
 
0 +1 -0 -1
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 ;)
Steven Hack
Steven Hack
13 jaar geleden
 
0 +1 -0 -1
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.
Arian Stolwijk
Arian Stolwijk
13 jaar geleden
 
0 +1 -0 -1
@ 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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
document.getElementById('..').onclick = function(){ /* ... */}


met Mootools (of jQuery/dojo/YUI vast ook wel) kan je gewoon zoiets doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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');
   });
});

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 ;)
Onbekend Onbekend
Onbekend Onbekend
13 jaar geleden
 
0 +1 -0 -1
Ik vind het nog steeds geen technisch hoogstandje.
Steven Hack
Steven Hack
13 jaar geleden
 
0 +1 -0 -1
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 :)
Jesper Diovo
Jesper Diovo
13 jaar geleden
 
0 +1 -0 -1
@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?
Steven Hack
Steven Hack
13 jaar geleden
 
0 +1 -0 -1
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?
Kay Kay
Kay Kay
13 jaar geleden
 
0 +1 -0 -1
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.
PHP erik
PHP erik
13 jaar geleden
 
0 +1 -0 -1
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.
Jesper Diovo
Jesper Diovo
13 jaar geleden
 
0 +1 -0 -1
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.
Pieter van Linschoten
Pieter van Linschoten
13 jaar geleden
 
0 +1 -0 -1
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. ;)
Steven Hack
Steven Hack
13 jaar geleden
 
0 +1 -0 -1
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?
The Force
The Force
13 jaar geleden
 
0 +1 -0 -1
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.
Teun Beijers
Teun Beijers
13 jaar geleden
 
0 +1 -0 -1
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...
Jacco Engel
Jacco Engel
13 jaar geleden
 
0 +1 -0 -1
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.
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Chris J
Chris J
11 jaar geleden
 
0 +1 -0 -1
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.

Inhoudsopgave

  1. verschillende-tabbladen-zonder-pagina-verversen

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.