Bullets als voortgangsindicator

Hierboven zie je een voortgangsindicator in vier stappen, zoals je die wel ziet bij het afrekenen in een webwinkel. De stappen worden aangegeven met rondjes (bullets) die worden verbonden door een lijntje. Na elke stap veranderen het volgnummer en de lijntjes van kleur.
Naar stap 1: Gegevens >> Druk een paar keer op de knop hier rechts om het voorbeeld te zien werken. Na stap 4 verdwijnt de knop. Ververs de pagina als je het voorbeeld nog een keer wilt zien.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• Inspiratie voor dit item is ontstaan door de diverse webwinkels die ik bezoek. Voor deze site heb ik iets nagebouwd wat er op lijkt.
• De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in de file script.js).
   
• De werking van het script
• Bij het openen van de pagina worden de hele rij met bullets, de lijntjes en de teksten zichtbaar gemaakt. De kleur van de bullets en de lijntjes is (hexadecimaal) #ccc, dit is lichtgrijs. De kleur van de teksten in en onder de bullets is #333, dit is heel donker grijs.
• Een klik op de knop (dit is te vergelijken met het afronden van een stap in een bestelproces) laat de eerste bullet en het nummer in de bullet van kleur veranderen: De kleurcodes #ccc en #333 worden omgewisseld. De tekst op de knop verandert.
• Een tweede klik op de knop laat de tweede bullet en het nummer in de bullet van kleur veranderen; ook hier door de kleurcodes om te wisselen. Het lijntje tussen de eerste en de tweede bullet verandert ook van kleur. Ook de tekst op de knop wordt veranderd.
• Bij een derde klik op de knop gebeurt het zelfde, bij de derde bullet en het lijntje tussen de tweede en de derde bullet en de tekst op de knop.
• Bij een vierde klik op de knop gebeurt het zelfde, bij de vierde bullet en het lijntje tussen de derde en de vierde bullet. De knop verdwijnt.
• Zie ook de tekst onder het kopje "Tenslotte..."
   
• HTML
• De HTML bestaat uit een enkele <div>-tag met de klasse container. Binnen deze tag bevinden zich <div>-tags waarmee de bullets en de lijntjes worden gemaakt, en <span>-tags voor de onderschriften.
• De <div>-tags binnen de <container>-tags hebben de klasse rondje en een uniek id om de kleuren te kunnen veranderen met JavaScript.
• De <span>-tags hebben de klasse lijntje en een uniek id om de kleuren te kunnen veranderen met JavaScript.
• In een een productieversie van je website moet je de HTML voor de knop mogelijk weglaten.
   
• CSS
• De CSS in de file styles.css bevat alleen gegevens over de bullets, de lijntjes en de tekst. Voor de knop is alleen inline-CSS gebruikt. De inhoud en de zichtbaarheid van de knop wordt geregeld door JavaScript.
• De klasse container bevat de lijntjes, de bullets en de teksten. De breedte en de hoogte zijn zodanig ingesteld dat de rondjes, de lijntjes en de teksten er precies in passen. Het geheel wordt in de regel gecentreerd met margin:0 auto;.
• De rondjes, de lijntjes en de teksten worden opgemaakt in de klassen rondje, lijntje en tekst. Het betreft hier de zaken die niet worden veranderd door JavaScript.
• Om elk onderdeel apart aan te kunnen spreken heeft elk onderdeel een uniek id, waarvan de naam voor zich spreekt. Hier wordt de positie binnen de container vastgelegd, alsmede de kleuren. Die zijn ingesteld op #ccc voor de lichte kleur (constante licht in het JavaScript) en op #333 voor de donkere kleur (constante donker in het JavaScript).
• De kleuren worden veranderd door JavaScript, de posities niet.
   
• JavaScript
• Het JavaScript bevat twee constanten: licht en donker. Dit zijn de kleuren van de bullets en de lijntjes. Die moeten hetzelfde zijn als wat bij de CSS is gebruikt.
• De function toonStap() zorgt voor het aanpassen van de bullets, de volgnummers en de lijntjes. De parameter stap bepaalt welke een andere kleur krijgen:
  º  Als stap = 1 : alleen bullet 1.
  º  Als stap = 2 : bullets 1 en 2, en het lijntje daar tussenin.
  º  Als stap = 3 : bullets 1, 2 en 3, en de lijntjes daar tussenin.
  º  Als stap = 4 : enzovoort.
   
• De function toonStap() begint met resetten van de bullets en de lijntjes naar de oorspronkelijke toestand.
• De function toonStap() vervolgt met twee switches, beide met parameter stap.
• De eerste switch regelt het veranderen van de kleuren. De tweede switch regelt het veranderen van het gedrag van de knop en van de tekst op de knop.
   
• In de eerste switch worden de cases in omgekeerde volgorde opgegeven. Ook zijn de break-statements weggelaten. De switch werkt nu als volgt:
  º  Als stap = 1 : alleen case 1.
  º  Als stap = 2 : case 2, daarna case 1.
  º  Als stap = 3 : cases 3, 2, en 1, in deze volgorde.
  º  Als stap = 4 : cases 4, 3, 2, en 1, in deze volgorde.
  Deze manier van programmeren levert een compacte code op, die gemakkelijk is uit te breiden.
   
• De tweede switch is alleen nodig in het voorbeeld. Let op de manier waarop onclick="toonStap()" wordt aangepast. Bronnen op internet geven aan dat dit de enige betrouwbare methode is.
  In een een productieversie van je website moet je de tweede switch mogelijk weglaten.
   
• Toepassen in je eigen site.
• Download de zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
• Pas de kleuren in de CSS en het JavaScript aan naar je eigen smaak.
• Verwijder zo nodig de HTML voor de knop. Verwijder dan ook de tweede switch uit de JavaScript-functiontoonStap().
• Pas in de CSS de begin-kleuren van de bullets, de lijntjes en de teksten aan.
• Tenslotte...
• Het voorbeeld zul je in de praktijk anders gebruiken dan hier is getoond. Stel jezelf een formulier voor dat bestaat uit meerdere bladzijden. Bij het openen van de pagina is bladzijde 1 zichtbaar, de rest is met display:none onzichtbaar gemaakt. Als deze eerste bladzijde is ingevuld klikt de gebruiker op een knop die de eerste pagina verbergt en de tweede pagina zichtbaar maakt (display:block), en ook toonStap(1) aanroep om de eerste bullet te laten verkleuren.
  Als de tweede pagina is ingevuld en er weer op de knop wordt geklikt, wordt de tweede pagina verborgen en wordt de derde pagina zichtbaar gewaakt. De aanroep toonStap(2) verandert het eerste lijntje en de tweede bullet, enzovoort.
• Merk op dat je de knop voor de 'volgende pagina' kunt programmeren zoals op deze pagina is gebeurd. Die moet dan wel buiten de verborgen / zichtbare gedeelten van het formulier staan.

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="styles.css">
<script src="script.js"></script>

(Zet dit in de <BODY> op de plaats waar de bullets moeten verschijnen).

<div id="container">
  <div class="rondje" id="rondje_1">1</div><div class="lijntje" id="lijntje_1"></div>
  <div class="rondje" id="rondje_2">2</div><div class="lijntje" id="lijntje_2"></div>
  <div class="rondje" id="rondje_3">3</div><div class="lijntje" id="lijntje_3"></div>
  <div class="rondje" id="rondje_4">4</div>
  <span class="tekst" id="tekst_1">Gegevens</span>
  <span class="tekst" id="tekst_2">Controleren</span>
  <span class="tekst" id="tekst_3">Betalen</span>
  <span class="tekst" id="tekst_4">Klaar!</span>
</div>

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

<button type="button" id="knop" onclick="toonStap(1)" style="visibility:visible;float:right;margin-left:40px;">Naar stap 1:
Gegevens &gt;&gt;</button>

Downloaden:
 
Druk op de knop:  File: voorb734.zip, 1749 bytes.