Ben's Hobbyhoekje -- Schuifregelaars voor het instellen van formuliervelden III: Verticaal II

Schuifregelaars voor het instellen van formuliervelden III: Verticaal II

Veel applicaties hebben parameters waarmee de invloed van een andere grootheid kan worden aangegeven. Een goed voorbeeld daarvan is de kleuraanduiding in HTML. 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.

Om dergelijke getallen snel en efficiënt in te stellen is een schuifregelaar heel geschikt. In HTML5 is een dergelijk hulpmiddel standaard beschikbaar, maar alleen liggend (horizontaal). Over 90° verdraaien kan met CSS, maar dat is lastig; dus kun je hem beter zelf schrijven.

Hier naast zie je een paar dergelijke schuifregelaars. Je kunt ze verstellen door de knop met de muis te verplaatsen (dat werkt niet op een aanraakscherm, je hebt echt een muis nodig). De stand van de regelaar verschijnt in het tekstvak er onder. Als je het tekstvak verandert(dat kan wél op een aanraakscherm), verplaatst de knop van de regelaar zich.
De hier getoonde regelaars hebben alle een lengte van 200 pixels. Het bereik (range) is aangepast door de parameters (start en factor) te veranderen. De stand van de regelaar bij het openen van de bladzijde wordt bepaald door de parameter begin.
Met de knop Reset breng je de regelaars terug naar de beginstand.

De beginstanden zijn:

Links:	Range = 0 - 200,	factor = 1,	start = 0
Midden:	Range = -50 - +50,	factor = 2,	start = -50
Rechts:	Range = 1 - 9,	factor = 25,	start = 1

In het item Schuifregelaars voor het instellen van formuliervelden II: Verticaal, vind je een vrijwel identieke set schuifregelaars. Die werkt precies andersom: Als je de regelaar naar beneden schuift, wordt het getal in het tekstvak groter; als je de regelaar naar boven schuift, wordt het getal in het tekstvak kleiner.

Om een dergelijke schuifregelaar te kunnen bouwen moeten de getallen in het tekstvak een eindige rekenkundige reeks vormen. Dat wil zeggen: Er is een laagste en een hoogste getal en het verschil tussen twee opeenvolgende getallen (de stapgrootte) is constant.
Er worden drie items besproken:
1. Inbouwen in je website
2. Opbouw van het script
3. 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 v2sliderule.js en v2sliderule.css bevatten (een deel van) het JavaScript resp. het style-sheet. Deze worden in de HEAD geplaatst.
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 HTML-code moet worden ingebed in een <form> ... </form>-tag. Dit is nodig in verband de tekstvelden waarin de stand van de regelaar staat.
De regelaar wordt opgebouwd in twee table-cells die onder elkaar liggen (dus verdeeld over twee table-rows). 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 aan de onderkant uit de "gleuf" kan schuiven.
De cellen hebben allebei class="V2SlideRuleBar". Deze staat in v2sliderule.css. Hiermee wordt de "gleuf" van de regelaar opgebouwd. De cellpadding, de cellspacing en de border van de tabel moeten gelijk zijn aan nul.
Ook het data-veld met de stand van de regelaar staat in een table-cell. Deze heeft geen attributen; de grootte van de cel wordt bepaald door de inhoud.
Het data-veld zelf heeft class="V2SlideRuleField". Deze is gedefinieerd in v2sliderule.css. Als je de opmaak van het dataveld wilt veranderen moet je daar de aanpassingen doen.
De schuifknop heeft class="V2SlideRuleButton". Ook deze staat in v2sliderule.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 width en height aanpassen.
- Als width verandert moet ook left worden aangepast.
- Als height verandert moet ook de hoogte van de onderste table-cell worden aangepast.
De ruimte tussen de schuifregelaar en het dataveld wordt gemaakt met een lege table-cell (in een eigen table-row), die daarvoor een geschikte height heeft.
Opmerking: Op deze pagina staat het dataveld onder de regelaar. Hij kan eenvoudig links, rechts of er boven worden gezet. Dat is een kwestie van de tabel anders indelen.
Als je meerder regelaars naast elkaar gebruikt, moet je daarvoor een table maken, met per cel één regelaar. Het is anders niet mogelijk om ze naast elkaar te positioneren.

Vóór dat de regelaars gebruikt kunnen worden moeten ze eerst worden geïnitialiseerd. Dat gebeurt met JavaScript. Voor elke regelaar moet de function initV2SlideRule() 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. Zie ook de voorbeelden bovenaan deze bladzijde.
factor	Hiermee wordt het aantal stappen dat de regelaar kan maken bepaald. De regelaars op deze pagina zijn 200 pixels hoog, resulterend in een bereik van 200/factor stappen. Voorbeeld: bij de rechter regelaar bovenaan deze bladzijde is factor = 25, het aantal stappen is dus 200/25 = 8.
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 bovenaan gezet. Vervolgens wordt deze naar beneden geschoven, totdat deze op de waarde begin uitkomt. Dat zijn dus (hoogte van de regelaar (hier: 200) - begin stappen. De waarde van factor wordt hierbij in rekening gebracht. Bij de drie regelaars op deze bladzijde is begin achtereenvolgens gelijk aan 50, 50 en 0.

Tenslotte: na het (her-)laden van de bladzijde moeten de regelaars worden ge-reset. Dat doe je door de function resetV2SlideRules() aan te roepen op het event window.onload (staat onderin v2sliderule.js).
De noodzaak hiervoor is een onhebbelijkheidje in Internet Explorer versie 9 en ouder waardoor de getallen in de data-velden gaan afwijken van de stand van de regelaars als je de bladzijde vernieuwt.
De function resetV2SlideRules() wordt ook gebruikt als je op Reset klikt.
Een schuifregelaar communiceert met het bijbehorende data-veld via het id van <div>, <img> en <input>-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 volgnummer wordt ook gebruikt in de event-handler:
onchange="changeV2SlideRule(0)" in de <input>-tag.
Als je de inhoud van de datavelden buiten de bladzijde wilt gebruiken, moeten de attributen action en eventueel method worden toegevoegd aan de <form>-tag.
Als je de inhoud van de datavelden wilt gebruiken binnen de bladzijde, kun je gebruik maken van document.getElementById("V2SlideRuleField_"+nr).value. Hierin is nr het volgnummer van de regelaar.
Het is mogelijk om een regelaar van buitenaf te wijzigen. Zet daarvoor de gewenste waarde in het betreffende dataveld en roep changeV2SlideRule(nr) aan, waarbij nr het volgnummer van de regelaar is.
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 op deze bladzijde 10 pixels hoog getoond, vanwege de duidelijkheid. In werkelijkheid is vsrule_m één pixel hoog.
De skins die je met deze regelaar kunt gebruiken zijn 100% compatible met de skins uit het item: Schuifregelaars voor het instellen van formuliervelden II: Verticaal. Daar vind je ook beschrijvingen van een paar andere skins, die je daar ook kunt downloaden.
In de downloadfile op deze pagina zijn geen extra skins opgenomen.

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="v2sliderule.css">
<script type="text/javascript" src="v2sliderule.js"></script>

(Zet dit in de <BODY>, op de plaats waar je het nodig hebt
en omsloten door <form>...</form>-tags).

** 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!

<form>

<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td valign="top">

<div id="V2SlideRulePlaceHolder_0" style="position:relative;">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td height="200" class="V2SlideRuleBar">
<div id="V2SlideRuleButtonContainer_0" style="position:absolute;
height:200px; width:18px; z-index:1; left: 0px; top: 0px;">
<img src="vsrule_b.gif" id="V2SlideRuleButton_0" alt="" border="0"
class="V2SlideRuleButton"></div></td>
</tr><tr>
<td height="10" class="V2SlideRuleBar"></td>
</tr><tr>
<td height="5"></td>
</tr><tr>
<td><input type="text" id="V2SlideRuleField_0" value="0" size="3"
maxlength="3" class="V2SlideRuleField" onchange="changeV2SlideRule(0)"></td>
</tr></table></div>


</td><td valign="top">

<div id="V2SlideRulePlaceHolder_1" style="position:relative;">

</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!

<input type="button" name="V2SlideRuleReset" value="Reset"
onClick="resetV2SlideRules()">


</td></tr></table>
</form>

** Initialiseer de regelaars

<script>
initV2SlideRule(0,0,1,50);
// aanroep initV2SlideRule voor regelaar _1
// enzovoort
</script>

Downloaden:

Druk op de knop: File: voorb258.zip, 4114 bytes.

Opmerking:

Een vergelijkbare, horizontaal opgebouwde schuifregelaar is beschikbaar. Zie daarvoor het item "Schuifregelaars voor het instellen van formuliervelden I: Horizontaal".

Een vergelijkbare, verticaal opgebouwde schuifregelaar is beschikbaar; die werkt precies andersom als deze. Zie daarvoor het item "Schuifregelaars voor het instellen van formuliervelden II: Verticaal".

Van zowel de verticale als van de horizontale schuifregelaars zijn ook versies ontwikkeld zonder het data-veld. Deze zijn te vinden in de rubriek Datum en tijd, Formulieren.