A lenyíló listák elkészítése praktikus akkor is:
- ha a weblapunk területen nagy helyet foglalnának el a hivatkozások, akkor ezeket egy lenyíló listában helyezzük el.
- raktárkészlet nyilvántartásnál, ha egy adott területen, többféle anyagot tárolunk.
- telefonos nyilvántartásunkat szakmánként szelektáljuk, ahol az adott mesterek címeit tároljuk.
Példa, egy választási lehetőségre
Egy fixen megjelenő témakörjegyzék, melyben lehetőség van, egy témakör kiválasztására.
Jelen esetben a size=szám határozza meg, az ablak magasságát, azaz hány sor jeleníthető meg olvashatóan.
Azon options szövegrész lesz az alapértelmezett melyben elhelyezzük a selected jellemzőt.
Jelen esetben a size=szám határozza meg, az ablak magasságát, azaz hány sor jeleníthető meg olvashatóan, az ablakban történő kattintás nélkül.
<form name="valaszt1">
<select name="lista1"size=10>
<option value="elso" selected> Első választási lehetőség.
<option value="masodik"> Második választási lehetőség.
<option value="harmadik"> Harmadik választási lehetőség.
<option value="negyedik"> Negyedik választási lehetőség.
<option value="otodik"> Ötödik választási lehetőség.
<option value="hatodik"> Hatodik választási lehetőség.
<option value="hetedik"> Hetedik választási lehetőség.
<option value="nyolcadik"> Nyolcadik választási lehetőség.
<option value="kilencedik"> Kilencedik választási lehetőség.
<option value="tizedik"> Tizedik választási lehetőség.
</select>
</form>
Megjelenése weboldalon
Példa, több választási lehetőségre:
Egy fixen megjelenő témakörjegyzék, melyben lehetőség van, több témakör kiválasztására is.
Ehhez a select jelölőelemben elhelyezzük a multiple jellemzőt.
Tartsuk lenyomva a CTRL billenytűt és kattintsunk a kijelölendő részekre.
Jelen esetben a size=szám határozza meg, az ablak magasságát, azaz hány sor jeleníthető meg olvashatóan, görgetősáv használata nélkül.
<form name="valaszt2">
<select name="lista2" size=10 multiple>
<option value="elso" selected> Első választási lehetőség.
<option value="masodik"> Második választási lehetőség.
<option value="harmadik"> Harmadik választási lehetőség.
<option value="negyedik"> Negyedik választási lehetőség.
<option value="otodik"> Ötödik választási lehetőség.
<option value="hatodik"> Hatodik választási lehetőség.
<option value="hetedik"> Hetedik választási lehetőség.
<option value="nyolcadik"> Nyolcadik választási lehetőség.
<option value="kilencedik"> Kilencedik választási lehetőség.
<option value="tizedik"> Tizedik választási lehetőség.
</select>
</form>
Megjelenése weboldalon
Első példa:
Egy válsztási lehetőség ablakának megjelenése weboldalon, ha nem adunk meg size méretet.
Ebben az esetben, a megjelenő ablakra kell kattintani, hogy a további választási lehetőségek megjelenjenek, illetve az ablak mellé, hogy eltünjenek.
Második példa:
Több választási lehetőség ablakának megjelenése weboldalon, ha nem adunk meg size méretet.
Általánosság a böngészőkre, lenyiló listáknál:
- Az egyválasztásos listákat lenyíló ablakként jelenítik meg.
- A többválasztásos listákat, görgethető listaként jelenítik meg.
A select, a listák objektuma. Négy tulajdonsággal rendelkezik.
A select objektum két tagfüggvénnyel rendelkezik, és úgy működik, mint a text objektum esetében:
- blur ( )
- focus ( )
A tömb, egy tulajdonsággal rendelkezik, ez a length, mely a választható lehetőségek számát adja.
A tömb elemei, öt tulajdonsággal rendelkeznek:
Használható eseménykezelők:
- onBlur
- onFocus
- onChange
Ha megakarjuk állapítani, a választható elemek közül, az éppen kiválasztott elem értékét, akkor ezt, két lépésben tehetjük meg.
Első:
A selectedIndex segítségével megállapítjuk az éppen kiválasztott elem sorszámát,
majd egy tetszőleges elnevezésű változóhoz rendeljük.
(jelen esetben, változó neve = ind az index rövidítése. A továbbiakban az ind tárolja a sorszámot )
Második:
Az options tömb után megadjuk az aktuális sorszámot, melyet az ind tárol. ( options[ind] )
A value elem tulajdonságával, megállapítjuk az éppen kiválasztott lehetőség értékét.
Ha ezzel megvagyunk, egy tetszőleges elnevezésű változóhoz rendeljük.
(jelen esetben, változó neve = val a value rövidítése)
Példa az egyválasztásos lehetőség esetében:
ind = document.urlap.lista.selectedIndex;
val = document.urlap.lista.options[ind].value;
Ha olyan listábol szeretnénk értéket kiolvasni, mely több választási lehetőséggel rendelkezik, akkot a selected jellemzőjét külön külön meg kell vizsgálni.
A programhoz tartozik egy css és egy js fájl
A munkahely témakörhöz, nem készült további felsorolás, ezen témakörnél a lenyíló ablak sem jelenik meg.
A lenyíló ablakokba írhatunk.:
- felsorolásokat
- tetszőleges hosszúságú szöveget
- hivatkozásokat
Ha a lenyíló ablak hosszabb, mint ami a monitoron megjeleníthető.
Húzzuk az egeret a lenyíló ablakra, majd az egéren lévő görgető kerék forgatásával mozgathatjuk a teljes ablakot le és fel.
<div id="lenyilomenu"> <script language="javascript" type="text/javascript" src="java_fájl_neve.js"> </script> <ul id="menu"> <li class="menu"> <a href="#"> Munkahely </a> </li> <li class="menu"> <a href="#"> Termékek </a> <ul> <li> <a href="#">Termék - 1 </a> </li> <li> <a href="#">Írhatunk hosszabb szöveget is </a> </li> <li> <a href="#">Megjelenő ablak szélessége, jelenleg 150px </a> </li> <li> <a href="#">Beírt szöveg, az ablak szélességét, nem változtatja meg.</a> </li> <li> <a href="#">Megjelenő ablak magassága, a beírt szöveg hosszától és betűméretétől függ </a> </li> <li> <a href="#">Termék - 6 </a> </li> <li> <a href="#">Termék - 7 </a> </li> </ul> </li> <li class="menu"> <a href="#"> Támogatók </a> <ul> <li> <a href="#">Támogatók - 1 </a> </li> <li> <a href="#">Támogatók - 2 </a> </li> <li> <a href="#">Támogatók - 3 </a> </li> <li> <a href="#">Támogatók - 4 </a> </li> </ul> </li> <li class="menu"> <a href="#"> Foglalkozások </a> <ul> <li> <a href="#">Munka - 1 </a> </li> <li> <a href="#">Munka - 2 </a> </li> <li> <a href="#">Munka - 3 </a> </li> <li> <a href="#">Munka - 4 </a> </li> <li> <a href="#">Munka - 5 </a> </li> </ul> </li> <li class="menu"> <a href="#"> Kapcsolatok </a> <ul> <li> <a href="#">Telefon </a> </li> <li> <a href="#">E-mail </a> </li> </ul> </li> </ul> </div>
#lenyilomenu {width: 800px;} #menu {margin-left: 8px; font-size: 16px; font-weight: bold; color: black; border: none;} #menu li {float: left; width: 120px; list-style-type: none; padding: 5px 25px 5px 5px;} #menu li {background-color: silver;} /* Meghatározzuk a lenyíló ablak, pozicióját, háttérszínét */ #menu li ul {position: absolute; margin: 0px; margin-top: 5px; margin-left: -10px; padding: 0px;} #menu li ul {background-color: silver;} /* Meghatározzuk a lenyíló ablakban megjelenő, listas ablakok stílusát */ #menu li ul li {width: 150px; float: none; list-style-type: none; font-size: 12px; color: black;} #menu li ul li {padding: 0px; margin: 0px; background-color: #ccc;} /* Meghatározzuk a horgony "a" megjelenési stílusát */ #lenyilomenu a { color: black; background-color: silver; display: block; padding-left: 5px;} #lenyilomenu a:hover {font-size: 16px; color: black; background-color: #fff; padding-left: 3px; margin: 0px;}
// változó az aktuális menühöz var t = false, current; function SetupMenu ( ) { if ( !document.getElementsByTagName ) return; items=document.getElementsByTagName ("li"); for ( i=0; i<items.length; i++) { if (items[ i ].className !="menu") continue; // Eseménykezelők beállítása thelink=findChild (items[i], "A"); thelink.onmouseover=ShowMenu; thelink.onmouseout=StartTimer; // Van almenü? if (ul=findChild (items[i], "UL") ) { ul.style.display="none"; for ( j=0; j<ul.childNodes.length; j++) { ul.childNodes[ j ].onmouseover=ResetTimer; ul.childNodes[ j ].onmouseout=StartTimer; } } } }