Ben's Hobbyhoekje -- Schuifregelaars voor het instellen van formuliervelden I: Horizontaal

Schuifregelaars voor het instellen van formuliervelden I: Horizontaal

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. Een dergelijk hulpmiddel is in HTML5 standaard beschikbaar, zie het item Over <input type=range>.

Hier onder 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 naast. 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.

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 sliderule.js en sliderule.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 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="SlideRuleBar". Deze staat in sliderule.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="SlideRuleField". Deze is gedefinieerd in sliderule.css. Als je de opmaak van het dataveld wilt veranderen moet je daar de aanpassingen doen.
De schuifknop heeft class="SlideRuleButton". Ook deze staat in sliderule.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.
De ruimte tussen de schuifregelaar en het dataveld wordt gemaakt met een lege table-cell, die daarvoor een geschikte width heeft.
Opmerking: Op deze pagina staat het dataveld rechts van de regelaar. Hij kan eenvoudig links, er boven of er onder worden gezet. Dat is een kwestie van de tabel anders indelen.

Vóór dat de regelaars gebruikt kunnen worden moeten ze eerst worden geïnitialiseerd. Dat gebeurt met JavaScript. Voor elke regelaar moet de function initSlideRule() 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 breed, resulterend in een bereik van 200/factor stappen. Voorbeeld: bij de derde 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 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 50, 50 en 0.

Tenslotte: na het (her-)laden van de bladzijde moeten de regelaars worden ge-reset. Dat doe je door de function resetSlideRules aan te roepen op het event window.onload (staat onderin sliderule.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 resetSlideRules() 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="changeSlideRule(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("SlideRuleField_"+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 changeSlideRule(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:
srule_m.gif srule_b.gif

Opmerking: srule-m.gif is op deze bladzijde 10 pixels breed getoond, vanwege de duidelijkheid. In werkelijkheid is srule_m één pixel breed.

In de downloadfile tref je onderstaande skins aan:

Naam	Uiterlijk	srule_m	srule_b

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

Hoekig
	Merk op dat de schuifknop hier 18 pixels breed is. Dat betekent dat je de breedte van de schuifknop in de styles moet veranderen van 10 in 18 pixels. Dat geldt dus ook voor de breedte 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 20 x 18 pixels. Zie ook 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 150 x 18 pixels.

Je installeert een andere skin door de bestaande bestanden srule_m.gif en srule_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 at 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="sliderule.css">
<script src="sliderule.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>
<div id="SlideRulePlaceHolder_0" style="position:relative;">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td width="200" class="SlideRuleBar">
<div id="SlideRuleButtonContainer_0" style="position:absolute; width:200px;
height:18px; z-index:1; left: 0px; top: 0px;">
<img src="srule_b.gif" id="SlideRuleButton_0" alt="" border="0"
class="SlideRuleButton"></div></td>
<td width="10" class="SlideRuleBar"></td><td width="10"></td>
<td><input type="text" id="SlideRuleField_0" value="0" size="3"
maxlength="3" class="SlideRuleField"
onchange="changeSlideRule(0)"></td>
</tr></table></div>

<div id="SlideRulePlaceHolder_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="SlideRuleReset" value="Reset"
onClick="resetSlideRules()">
</form>

** Initialiseer de regelaars

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

Downloaden:

Druk op de knop: File: voorb200.zip, 11 307 bytes.

Opmerking:

Een vergelijkbare, verticaal opgebouwde schuifregelaar is beschikbaar in twee versies. Zie daarvoor de items "Schuifregelaars voor het instellen van formuliervelden II: Verticaal" en "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.