Combobox in CSS en JavaScript

Hier onder staat een zg. Combobox. Dat is een combinatie van een listbox en een tekstveld. In dit voorbeeld kun je een van de voorgeprogrammeerde kleuren invullen, maar je kunt ook zelf een (willekeurige!) tekst invoeren.

Kies een kleur uit de lijst of typ er een in; klik vervolgens op de knop.

Rood

Oranje

Geel

Groen

Blauw

Violet

Een combobox lijkt veel op een listbox. Ze hebben allebei een tekstveld en een "pijltje naar beneden". Als je op dat pijltje klikt verschijnt er een menu waar je een keuze uit kunt maken. De keuze verschijnt in het tekstveld.
Het verschil is dat je bij een listbox niet zelf een waarde kunt invullen. Je bent gebonden aan de keuzes die de listbox je biedt. Bij een combobox kun je invullen wat je wilt. Een combobox heeft dus meer mogelijkheden.

in de specificatie van HTML ontbreekt de combobox. Dat is vreemd, omdat in elke moderne programmeertaal de combobox gewoon beschikbaar is. Als je een een combobox nodig hebt op je website moet je hem dus zelf maken.

Op deze pagina wordt een script besproken dat ik zelf heb ontwikkeld, waarmee je je eigen comboboxen kunt maken. De code van het voorbeeld staat onderaan deze pagina. Je kunt hem downloaden om zelf te gebruiken.

• Er worden twee items besproken:
  1. De werking van het script
  2. Inbouwen in je eigen pagina
   
• De combobox is opgebouwd uit een tekst-veld en een plaatje (de pijl).
• Het roll-over effect wordt gedaan door de JavaScript function SwapImage(). Het effect wordt geactiveerd door onmouseover en onmouseout. Het principe van werking wordt beschreven in Plaatje laten veranderen als de muis er over gaat. Hier wordt echter geen name-attribuut wordt gebruikt om het plaatje aan te passen. In plaats daarvan wordt het id-attribuut gebruikt (id="CbBi_1"), in combinatie met getElementById().
• Als je op de pijl of in het tekstveld klikt, verschijnt het afrolmenu. Als je weer op de pijl of in het tekstveld klikt, verdwijnt het weer. Dat wordt geregeld door onclick dat de function showMenu() aanroept.
• Als je iets wijzigt in het tekstveld terwijl het afrolmenu zichtbaar is, verdwijnt het afrol menu. Dat wordt geregeld door onkeyup, dat de function Hidemenu() aanroept.
   
• Het afrolmenu bevindt zich direct onder het tekstveld, maar het is verborgen. Het wordt zichtbaar gemaakt door de function showMenu().
• Voor de opmaak van de combobox wordt een tweetal tabellen ingezet:
  
  1. Deze tabel dient alleen om het tekstveld en het plaatje bij elkaar te houden.
  2. Deze tabel bevat het afrolmenu. Bij het openen van de pagina is dit verborgen. Het wordt zichtbaar gemaakt door ShowMenu(). Voor de communicatie met JavaScript heeft deze tabel id="CbBm_1".
• Het tekstveld kan worden veranderd vanuit het afrolmenu. Dat gebeurt door de function DoBox(), die wordt geactiveerd door onclick. Voor de communicatie met JavaScript heeft het tekstveld id="CbBt_1".
   
• Het afrolmenu zelf wordt opgebouwd in de tweede tabel. Deze tabel heeft voor elk menu-item één regel die één cel bevat. De cel bevat het menu-item.
• Voor de communicatie met JavaScript heeft elke cel een eigen id: id="CbB_1#1", id="CbB_1#2", id="CbB_1#3", enzovoort.
• Het getal na het # is een volgnummer, dat uniek moet zijn binnen de tabel. De nummering hoeft niet aaneengesloten te zijn.
   
• De twee tabellen worden samengehouden door een zg. placeholder. Dat is een tag waarmee je een aantal zaken op hun plaats houdt. De placeholder zelf wordt via CSS in het document gepositioneerd, zodat alles mooi bij elkaar blijft.
  Hier wordt daarvoor het formulier (<form>-tag) gebruikt waar het tekstveld in staat. Voor de duidelijkheid heeft dit een naam: id="CbB_1_placeHolder".
• Voor de namen van de id's wordt hier een conventie gevolgd, waardoor het mogelijk is om meerdere comboboxen in één document te hebben. Elke combobox heeft een uniek volgnummer dat voorafgegaan wordt door een laag liggend streepje (underscore). Op deze pagina is alleen nummer _1 gebruikt. Als je meerdere comboboxen in je document wilt zetten nummer je die _1, _2, _3, enzovoort.
• Als je meerdere comboboxen gebruikt moet je voor elk nieuw volgnummer een complete set attributen toevoegen aan combobox.css. Het gaat hier alleen om alle zaken waar een volgnummer in voorkomt.

Inbouwen in je eigen site

• De code bestaat uit HTML, Javascript en CSS.
• De HTML staat in je document zelf. De HTML-code moet je aanpassen om het te gebruiken
  In de eerste tabel:
  • Let op de locatie van de plaatjes combobox1.gif en combobox12.gif binnen je website. In het voorbeeld staan deze plaatjes in dezelfde directory als de html-code, maar ze kunnen natuurlijk ook in een aparte directory staan. Het gaat hier om één regel code, nl. waar de <img>-tag in staat. Daar staan wel drie verwijzingen in!.
  In de tweede tabel:
  • De inhoud van de cel.
  • Het volgnummer in de id (#1, #2, ...).
  Uiteraard kun je ook cellen toevoegen of weglaten. 
   
• Het JavaScript staat in de file combobox.js. Deze hoef je niet te veranderen om het te gebruiken.
   
• De CSS staat in de file combobox.js. Die moet je aanpassen om het zelf te gebruiken.
• Met de CSS kun de opmaak van het afrolmenu helemaal naar je hand zetten. Dat houdt het risico in dat je dingen kunt veranderen waardoor de combobox niet goed meer werkt. Beperk je dus tot het hieronder genoemde:
  

  CSS-attribuut		Wat je kunt veranderen
  #CbB_X_placeHolder		left; eventueel kun je top toevoegen. width en height verstoren de opmaak van de combobox en daarmee van het hele document. Die mogen hier dus NIET voorkomen!
  #CbBm_X		Met width zorg je ervoor dat de 'pijl naar beneden' klem tegen het tekstveld aan komt te liggen. Door deze width gelijk te maken aan de width in de class .ComboText_X lukt dat altijd. Voor color, background-color en border kun je invullen wat je wilt. Zorg wel voor een geschikt kleur­contrast, zodat het afrolmenu optimaal leesbaar is.
  .ComboText_X		Hiermee maak je het tekstveld op. Met width zorg je ervoor dat het veld breed genoeg is. Het width-attribuut van de tag <input type="input"> in de HTML-code moet je weglaten. De eigenschappen font-family en color kun je naar eigen smaak instellen. Behalve deze twee eigen­schappen zou je hier ook background-color en border kunnen toepassen.
  .ComboImg		Hiermee maak je het plaatje met de pijl op. Voor de eigenschappen width en height neem je de afmetingen van de plaatjes combobox1.gif en combobox2.gif. Je zou eventueel border kunnen veranderen als je dat ook bij het tekstveld doet.

  N.B.: In deze tabel staat X voor het volgnummer.

Gebruik:

• De code staat in de <HEAD>.

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="combobox.css">
<script src="combobox.js"></script>
<script>
// Dit is alleen nodig in het voorbeeld: Afhandeling van de button
function LaatZien() {
  var aa = document.getElementById('CbBt_1').value
  if ( aa == "") {
    window.alert('U heeft nog geen keus gemaakt!')
  } else {
    window.alert('U heeft gekozen voor\n\n'+aa+'.')   }
}
</script>

<form id="CbB_1_placeHolder">
<table cellspacing="0" cellpadding="0" border="0"><tr>
  <td><input type="text" id="CbBt_1" class="comboText_1" value=""
    onclick="ShowBox(this.id)" onkeyup="HideBox(this.id)"></td>
  <td><img src="combobox1.gif"
    onmouseover="SwapImage(this.id,'combobox2.gif')"
     onmouseout="SwapImage(this.id,'combobox1.gif')"
    id="CbBi_1" class="comboImg"
    onclick="ShowBox(this.id)"></td>
</tr></table>
 
<table cellspacing="0" cellpadding="0" border="0" id="CbBm_1" style="display:none">
  <tr><td onclick="DoBox(this.id)" id="CbB_1#1">Rood</td></tr>
  <tr><td onclick="DoBox(this.id)" id="CbB_1#2">Oranje</td></tr>
  <tr><td onclick="DoBox(this.id)" id="CbB_1#3">Geel</td></tr>
  <tr><td onclick="DoBox(this.id)" id="CbB_1#4">Groen</td></tr>
  <tr><td onclick="DoBox(this.id)" id="CbB_1#5">Blauw</td></tr>
  <tr><td onclick="DoBox(this.id)" id="CbB_1#6">Violet</td></tr>
</table></form>
 
<div align="center"><button type="button" onclick="LaatZien()">Laat zien wat ik gekozen heb</button></div>

Downloaden:
 
Druk op de knop:  File: voorb321.zip, 2836 bytes.