Schuifregelaars II: verticaal

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".

0% 50% 100% Reset

Hiernaast zie je drie schuifregelaars die de RGB-waarde van de achtergrondkleur real-time veranderen. De linkse regelaar werkt met rood, de middelste werkt met groen en de rechtse 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. In het item Schuifregelaars III: Verticaal II, vind je een vrijwel identieke set schuifregelaars. Die werkt precies andersom: 100% bovenaan, 0% onderaan.

• Er worden drie items besproken:
  1. Inbouwen in je website
  2. Opbouw van het script
  3. Het uiterlijk van de regelaar veranderen (skins)
   
• Dit 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 II: Verticaal.
   
• 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 srulev.js en srulev.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 onder elkaar liggen. Beide cellen hebben het attribuut height. De hoogte van de bovenste cel bepaalt de schuiflengte van de regelaar. De onderste cel is even hoog als de schuifknop. Deze is nodig om te voorkomen dat de schuifknop onder de "gleuf" terecht komt.
• De cellen hebben allebei class="VSliderBar". Deze staat in srulev.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="VSliderButton". Ook deze staat in srulev.css. Als je een andere schuifknop gebruikt (zie verder bij 'skins') en de afmetingen van de knop zijn anders dan 18x10 pixels, moet je de attributen height en width aanpassen.
  
  • Als width verandert moet ook left worden aangepast.
  • Als height verandert moet ook de hoogte van de onderste 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 initVSlider() 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 127 pixels hoog, resulterend in een bereik van 127/factor stappen. Voorbeeld: Op deze bladzijde is factor = 0.5, het aantal stappen is dus 127/0.5 = 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 onderaan 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 resetVSliders() aan te roepen op het event window.onload (staat onderin srulev.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 resetVSliders() wordt ook gebruikt (in de function ResetVButton()) 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 moveVSlider(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:

  vsrule_m.gif

  vsrule_b.gif

  
  Opmerking: vsrule-m.gif is hier 10 pixels hoog getoond, vanwege de duidelijkheid. In werkelijkheid is vsrule_m één pixel hoog.
• Elders op deze site, in het item Schuifregelaars voor het instellen van formuliervelden II: Verticaal, wordt uitgebreid ingegaan op het veranderen van de skin. 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="srulev.css">
De volgende regel is nodig voor het voorbeeld op deze bladzijde. Zie de tekst!
<script src="decihexa.js"></script>
<script src="srulev.js"></script>

(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).

<div id="VSPlaceHolder_0" style="position:relative;">
<table border="0" cellspacing="0" cellpadding="0"><tr>
  <td height="127" width="25" align="center" class="VSliderBar">
  <div id="VSButtonContainer_0" style="position:absolute; width:18px;
    height:127px; z-index:1; left: 0px; top: 0px;">
<img src="../images/vsrule_b.gif" id="VSliderButton_0" alt="" border="0"
    class="VSliderButton"></div></td>
</tr><tr>
  <td height="10" align="center" class="VSliderBar"></td>
</tr></table></div>
 
<div id="VSPlaceHolder_1" style="position:relative;">
   <!-- table voor regelaar _1 -->
</div>
.
.
enzovoort

<button type="button" onclick="resetButton('#E4E9F6')" value="Reset">
Reset</button>