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

Schuifregelaars voor het instellen van formuliervelden II: Verticaal

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

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

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

De code staat onderaan deze pagina. Je kunt hem downloaden om zelf te gebruiken, inclusief de skins.

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 vsliderule.js en vsliderule.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="VSlideRuleBar". Deze staat in vsliderule.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="VSlideRuleField". Deze is gedefinieerd in vsliderule.css. Als je de opmaak van het dataveld wilt veranderen moet je daar de aanpassingen doen.
De schuifknop heeft class="VSlideRuleButton". Ook deze staat in vsliderule.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 initVSlideRule() 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, 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 50, 50 en 0.

Tenslotte: na het (her-)laden van de bladzijde moeten de regelaars worden ge-reset. Dat doe je door de function resetVSlideRules() aan te roepen op het event window.onload (staat onderin vsliderule.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 resetVSlideRules() 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="changeVSlideRule(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("VSlideRuleField_"+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 changeVSlideRule(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.

In de downloadfile tref je onderstaande skins aan:

Uiterlijk	Naam	srule_m	srule_b

	Hobbyhoekje
	Dit is de skin die op deze bladzijde is gebruikt.

	Hoekig
	Merk op dat de schuifknop hier 18 pixels hoog is. Dat betekent dat je de hoogte van de schuifknop in de styles moet veranderen van 10 in 18 pixels. Dat geldt dus ook voor de hoogte van de "extra" table-cell (zie bij de beschrijving).

	Smiley
	Ook hier wijkt de breedte van de schuifknop af. Deze is 15 x 18 pixels. Zie ook bij 'Hoekig'.

	Lief
	Ook hier wijkt de breedte van de schuifknop af. Deze is 18 x 18 pixels net als bij 'Hoekig'.

Je eigen skin kan hier ook bij staan! Stuur even een mailtje, dan neem ik contact met je op. Het plaatje moet in .GIF-formaat zijn, afmeting 18 x 100 pixels.

Je installeert een andere skin door de bestaande bestanden vsrule_m.gif en vsrule_b.gif gewoon te overschrijven met de versie die hoort bij de betreffende skin.
Wijzig eventueel de afmetingen van de schuifknop, zoals hiervoor is aangegeven.
De hier getoonde skins zijn maar een paar van de ontelbare mogelijkheden. De kleuren kun je eenvoudig aanpassen aan de opmaak van je website. De .GIF-bestanden moeten een transparante achtergrond hebben.
Als je je eigen skins wilt bouwen, kan dat natuurlijk ook. Zorg dat de figuurtjes goed bij elkaar passen.
De hoogte en de breedte van de figuurtjes kun je vrij kiezen. Als je andere afmetingen gebruikt dan op deze bladzijde, moet je ook de styles aanpassen, zowel in de HTML-code als in het style-sheet.

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="vsliderule.css">
<script src="vsliderule.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="VSlideRulePlaceHolder_0" style="position:relative;">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td height="200" class="VSlideRuleBar">
<div id="VSlideRuleButtonContainer_0" style="position:absolute;
height:200px; width:18px; z-index:1; left: 0px; top: 0px;">
<img src="vsrule_b.gif" id="VSlideRuleButton_0" alt="" border="0"
class="VSlideRuleButton"></div></td>
</tr><tr>
<td height="10" class="VSlideRuleBar"></td>
</tr><tr>
<td height="5"></td>
</tr><tr>
<td><input type="text" id="VSlideRuleField_0" value="0" size="3"
maxlength="3" class="VSlideRuleField" onchange="changeVSlideRule(0)"></td>
</tr></table></div>


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

<div id="VSlideRulePlaceHolder_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="VSlideRuleReset" value="Reset"
onClick="resetVSlideRules()">


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

** Initialiseer de regelaars

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

Downloaden:

Druk op de knop: File: voorb206.zip, 11 374 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 III: Verticaal II".

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