Ben's Hobbyhoekje -- Uitgebreide paginakiezer

Uitgebreide paginakiezer

Bij veel websites moet de informatie over meerdere pagina's worden verdeeld, om te voorkomen dat er te veel informatie op een bladzijde komt, waardoor de bezoeker van de pagina verdwaalt in de informatie. Webwinkels die veel gelijksoortige artikelen verkopen, kunnen hier last van hebben. Denk hierbij aan kleding, 1001 soorten shampoo, computeronderdelen enz.

Om snel naar een bepaalde pagina te kunnen gaan wordt vaak een pagina kiezer ingezet. Een eenvoudig voorbeeld van zo'n kiezer vind je op de pagina Varia op deze site.

Op deze pagina presenteer ik code waarmee je een dergelijke kiezer kunt maken voor je eigen website. Deze uitvoering is algemeen toepasbaar. Voorwaarde is dat er minstens tien pagina's zijn. Bij minder dan tien pagina's stopt het script.
Het uiterlijk (voor twintig pagina's) is:

<<Vorige |1|2| … |5| … |19|20| Volgende>>

N.B.: Dit is een niet-werkend voorbeeld. De "echte" versie staat verder op bladzijde.
• Als je op een getal klikt of tikt ga je naar de overeenkomende pagina.
• Met Volgende>> ga je naar de volgende pagina. Deze knop ontbreekt als je op de laatste pagina bent.
• Met <<Vorige ga je een pagina terug. Deze knop ontbreekt als je op de eerste pagina bent.
• Als je op drie puntjes klikt of tikt ga je naar een pagina halverwege de getallen die er voor of erna staan. Dus als je in het voorbeeld op de linker … zou klikken (tussen 2 en 5), ga je naar pagina 4. Als je op de rechter … zou klikken (tussen 5 en 19) ga je naar pagina 10.
• Het paginanummer in het midden wordt bepaald door te kijken naar het totale aantal pagina's en de pagina waar je bent. Bij het openen van de pagina is dat ongeveer ¼ van het aantal pagina's.

Het voorbeeld:
Dit voorbeeld bevat een simulatie van 75 pagina's.

·· (paginakiezer) ··

Dit is een uitgebreide versie van de paginakiezer die wordt beschreven in het item Pagina kiezer.

De werking van het script is hiervoor in globale termen al besproken. Hieronder staat nog wat meer informatie over het script zelf en over hoe je het in je eigen site opneemt.
De code bestaat uit HTML, JavaScript (in de file upkiezer.js en CSS (in de file upkiezer.css.
Er is bij het ontwikkelen van dit script alleen gekeken naar de werking van de paginakiezer. Om het voorbeeld te laten werken wordt steeds deze pagina aangeroepen, met het paginanummer in de query-string. Het is eigenlijk een proof-of-concept, waar voor een praktische toepassing nog wel het nodige aan veranderd moet worden.
Een van de mogelijkheden is om alle pagina's in één bestand te zetten, verdeeld in <div>-tags die elk een uniek id en style="display:none" hebben. Bij keuze van een zekere pagina wordt van het betreffende blok style="display:block" ingesteld.
Een andere mogelijkheid is om elk blok informatie in een apart bestand te zetten. Dan zal de code van de paginakiezer in elk van deze bestanden moeten worden gezet.
In beide gevallenmoet het paginanummer worden meegegeven in de query-string.
Gebruiken in je eigen site
Download de .zip-file en pak hem uit. Open het bestand html-723.htm in een browser. Je hebt nu een werkend voorbeeld.
Pas de CSS (upkiezer.css) voor de opmaak van paginakiezer aan aan je eigen wensen.
Pas het JavaScript (upkiezer.js) aan. In de variabele opmaak1 kun je HTML-tags kwijt om de paginakiezer mee op te maken. In opmaak2 zet je de sluit-tags. In het voorbeeld is <code> gebruikt. Als je dit niet wilt gebruiken moet je daar lege strings in zetten.
Zet de paginabestanden in de array paginas, inclusief de query-string met paginanummer. Dit moeten er minstens 10 zijn, anders zal het script niet werken.
Pas het JavaScript in de (body) aan voor wat betreft de melding 'pagina … van …'. De regel initPaginaKiezer(dezePagina); moet blijven, anders werkt de paginakiezer niet.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<link rel="stylesheet" href="upkiezer.css">
<script src="upkiezer.js"></script>

(Zet dit in de <BODY> op de plaats waar de paginakiezer moet verschijnen).

<p id="paginakiezer" class="paginakiezer">·· (paginakiezer) ··</p>

(Zet dit in de <BODY> op de plaats waar de melding 'pagina … van …' moet verschijnen).

<script>
let helper = location.search, dezePagina;
if (helper == "") dezePagina = 1; else dezePagina = parseInt(helper.substr(1),10);
document.getElementById('demo').innerHTML = "Pagina " + dezePagina + " van " + paginas.length + ".";
initPaginaKiezer(dezePagina);
</script>

Downloaden:

Druk op de knop: File: voorb723.zip, 2608 bytes.