Schuifregelaars I: Horizontaal
Veel applicaties hebben parameters waarmee de invloed van een of andere grootheid kan worden ingesteld. Als je dat real-time
wilt doen (dat wil zeggen dat veranderingen direct zichtbaar zijn), is een schuifregelaar een handig hulpmiddel. Een goed
voorbeeld daarvan is de volume-regeling van je geluidsinstallatie.
Een dergelijk hulpmiddel is in HTML5 standaard beschikbaar, zie het item Over
<input type=range>, maar het is ook leuk om er zelf een te bouwen.
Op deze bladzijde wordt de kleuraanduiding in HTML als voorbeeld gebruikt. Elke kleur is een mengsel van Rood, Groen
en Blauw (RGB). De "aanwezigheid" van elk van die kleuren is een getal tussen 0 en 255.
Een uitgebreid verhaal over kleuren in HTML vind je in het item "Kleurcodes voor tekst, links en achtergrond".
Hieronder zie je drie schuifregelaars die de RGB-waarde van de achtergrondkleur real-time veranderen. De bovenste werkt
met rood, de middelste werkt met groen en de onderste is voor blauw. Als je ze verschuift verandert de achtergrond van deze
bladzijde van kleur.
Klik op 'Reset' om de originele achtergrondkleur kleur terug te zetten.
|
Op deze bladzijde wordt beschreven hoe je dit aanpakt. De code kun je downloaden om zelf te gebruiken.
Elders op deze site, in het item Schuifregelaars voor het instellen van formuliervelden I: Horizontaal, vind je een versie van deze schuifregelaar die direct op de datavelden van een formulier werkt.
Het idee voor deze schuifregelaar is ontstaan door een toepassing die ik "ergens" op internet ben tegengekomen.
Die toepassing werkte alleen met Internet Explorer. Deze versie heeft die beperking niet, maar het werkt niet met een aanraakscherm…
Een variant van deze code die wél bruikbaar is met een aanraakscherm, is te vinden in het item
Schuifregelaars voor het instellen van formuliervelden I: Horizontaal.
- Er worden drie items besproken:
- Inbouwen in je website
- Opbouw van het script
- Het uiterlijk van de regelaar veranderen (skins)
- De code bestaat uit HTML, JavaScript en een Style-sheet. In het algemeen moeten die worden aangepast om de regelaar in je eigen website te gebruiken. Dat geldt zeker als je het uiterlijk van de regelaar verandert.
- De files sruleh.js en sruleh.css bevatten (een deel van) het JavaScript resp. het style-sheet. Deze worden in de HEAD geplaatst.
- Ten behoeve van het voorbeeld op deze bladzijde is ook de file decihexa.js gebruikt. Hierin staan functions die
dienen om de decimale uitvoer van de regelaars om te rekenen naar hexadecimale getallen waarmee de kleurcode van de achtergrond
beschreven wordt. Je zult deze functions niet voor alle toepassingen nodig hebben.
Zie de items "Kleurcodes voor tekst, links en achtergrond" en "Getallen omzetten van Decimaal naar Hexadecimaal en terug". - Op de plaats waar de regelaar moet komen plaats je een stuk HTML-code.
- De Reset-button is optioneel. Je kunt hem erbij zetten maar je kunt hem ook weglaten.
- De regelaar wordt opgebouwd in twee table-cells die naast elkaar liggen. Beide cellen hebben het attribuut width. De breedte van de linker cel bepaalt de schuiflengte van de regelaar. De rechter cel is even breed als de schuifknop. Deze is nodig om te voorkomen dat de schuifknop naast de "gleuf" terecht komt.
- De cellen hebben allebei class="SliderBar". Deze staat in sruleh.css. Hiermee wordt de "gleuf" van de regelaar opgebouwd. De cellpadding, de cellspacing en de border van de tabel moeten gelijk zijn aan nul.
- De schuifknop heeft class="SliderButton". Ook deze staat in sruleh.css. Als je een andere schuifknop
gebruikt (zie verder bij 'skins') en de afmetingen van de knop zijn anders dan 10x18 pixels, moet je de attributen width
en height aanpassen.
- Als height verandert moet ook top worden aangepast.
- Als width verandert moet ook de breedte van de rechter table-cell worden aangepast.
- Vóór dat de regelaars gebruikt kunnen worden moeten ze eerst worden geïnitialiseerd. Dat gebeurt met
JavaScript. Voor elke regelaar moet de function initSlider() worden aangeroepen. Deze function heeft vier parameters:
naam Betekenis nr Volgnummer. De eerste regelaar heeft nr = 0. De tweede heeft nr = 1, enz. De nummering moet aaneengesloten zijn en beginnen bij nul.start Dit is de laagste waarde die de regelaar kan aannemen. Voor deze toepassing is dat 1.
Het script kan er niet tegen dat alle drie de regelaars tegelijkertijd de waarde nul hebben. De reden is (nog) onduidelijk. Daarom is er voor gekozen om de regelaars bij 1 te laten beginnen.factor Hiermee wordt het aantal stappen dat de regelaar kan maken bepaald.
De regelaars op deze pagina zijn 254 pixels breed, resulterend in een bereik van 254/factor stappen.
Voorbeeld: Op deze bladzijde is factor = 1, het aantal stappen is dus 254/1 = 254.begin Hiermee wordt de stand van de regelaar bepaald bij het openen van de pagina, en na een klik op Reset.
De regelaar wordt eerst helemaal links gezet, daarna volgen begin stappen. De waarde van factor wordt hierbij in rekening gebracht. Bij de drie regelaars op deze bladzijde is begin achtereenvolgens gelijk aan 228, 233 en 246 (Dit is de decimale RGB-code van de achtergrond van deze bladzijde).
- Tenslotte: na het (her-)laden van de bladzijde moeten de regelaars worden ge-reset. Dat doe je door de function resetSliders()
aan te roepen op het event window.onload (staat onderin sruleh.js).
Dit is nodig omdat er wordt gerefereerd aan de kleurcode van de achtergrond van de pagina. Die komt pas voor scripts beschikbaar als de bladzijde helemaal geladen is. Dit verschijnsel treedt op bij alle bekende browser-engines. - De function resetSliders() wordt ook gebruikt (in de function ResetButon()) als je op Reset klikt.
- Een schuifregelaar communiceert met scripts op de bladzijde via het id van <DIV> en <IMG>-tags.
Om onderscheid tussen verschillende regelaars te kunnen maken (in de JavaScript-functions) is daar een volgnummer aan toegevoegd,
voorafgegaan door een liggend streepje: _0, _1, _2, enz.
In de nummering mogen geen gaten voorkomen. Er zijn per regelaar verschillende id's, maar het volgnummer is per regelaar altijd hetzelfde. - Het is mogelijk om een regelaar van buitenaf te wijzigen. Roep daarvoor de function moveSlider(nr,nw) aan. nr
is het volgnummer van de regelaar, nw is de gewenste waarde. De waarde van de bij de regelaar behorende variabele moet
je zelf aanpassen.
Merk op dat er geen enkele controle is op de juistheid van de invoer. Ook dat moet je dus zelf programmeren.
- Het verschuiven van de knoppen is gebaseerd op een script dat elders op deze site wordt beschreven. Het gaat om
"Plaatjes en tekst verplaatsen".
- Je kunt de verschijningsvorm ("skin") van de regelaar veranderen. Dat doe je door de onderstaande figuurtjes
te vervangen door andere:
srule_m.gif 
srule_b.gif 
Opmerking: srule-m.gif is hier 10 pixels breed getoond, vanwege de duidelijkheid. In werkelijkheid is srule_m één pixel breed. - Elders op deze site, in het item Schuifregelaars voor het instellen van formuliervelden I: Horizontaal in de rubriek Datum en tijd, Formulieren. Op die pagina kun je een paar skins downloaden, klik HIER.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
- De <BODY>-tag krijgt een extra attribuut.
De code ziet er als volgt uit:
(Zet dit in de <HEAD> -- volgorde is belangrijk).
<link rel="stylesheet" href="sruleh.css">
De volgende regel is nodig voor het voorbeeld op deze bladzijde. Zie de tekst!
<script type="text/javascript" src="decihexa.js"></script>
<script type="text/javascript" src="sruleh.js"></script>
(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).
** Regelaar: (maak per regelaar een nieuw volgnummer aan)De code van de sommige tags is voor de leesbaarheid over twee regels verdeeld.
Het moet in de code van je website op één regel staan!
<div id="SPlaceHolder_0" style="position:relative;">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td width="200" class="SliderBar">
<div id="SButtonContainer_0" style="position:absolute; width:200px;
height:18px; z-index:1; left: 0px; top: 0px;">
<img src="srule_b.gif" id="SliderButton_0" alt="" border="0"
class="SliderButton"></div></td>
<td width="10" class="SliderBar"> </td>
</tr></table></div>
<div id="SPlaceHolder_1" style="position:relative;">
<!-- table voor regelaar _1 -->
</div>
.
.
enzovoort
** Reset-knop:
De code van deze tag is voor de leesbaarheid over twee regels verdeeld.
Het moet in de code van je website op één regel staan!
<button type="button" onclick="resetButton('#E4E9F6')" value="Reset">
Reset</button>
** Initialiseer de regelaars
<script>
initSlider(0,1,1,228);
// aanroep initSlider voor regelaar _1
// enzovoort
</script>
Downloaden:
Druk op de knop:
File: voorb204.zip, 52502 bytes.
Opmerking:
Vergelijkbare, verticaal opgebouwde schuifregelaars zijn beschikbaar. Zie de items "Schuifregelaars II: Verticaal" en "Schuifregelaars III: Verticaal II".
