Űrlap elemek lenyíló listák ablakok 1105
Több lehetőség közül válassz egyet vagy többet.
Ha nagymennyiségű választási lehetőséget akarunk biztosítani űrlapunkon a felhasználónak, akkor válasszuk a lenyíló listát, azaz ablakot.
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
A következő példák megegyeznek az előző két példával, különbség közöttük csak annyi, hogy a kezdő select jelölőelemből, az ablakméretet size="10" töröljük
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 objektum
A select, a listák objektuma. Négy tulajdonsággal rendelkezik.
- name: Az objektum és listák neve.
- lenght: A listában lévő választható lehetőségek száma.
- options: Választható lehetőségeket tartalmazó tömb. A tömbben, a választható lehetőségek, rendelkeznek egy bejegyzéssel.
- selectedIndex: Az éppen kiválasztott válaszható lehetőség sorszámát adja vissza.
Többválasztásos listában, az első kiválasztott lehetőséget jelöli.
Ezzel egyszerűen ellenőrizhetjük a választható lehetőség értékét.
A select objektum két tagfüggvénnyel rendelkezik, és úgy működik, mint a text objektum esetében:
- blur ( )
- focus ( )
Az options tömb, és a tömb elemei
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:
- name: A választható lehetőség neve ( ezt a kiszolgáló használja.)
- text: A választható lehetőség szövege.
- index: A választható lehetőségek sorszáma a tömbben.
- selected: A választható lehetőség aktuális állapota.
JavaScriptből, ha ezt true-ra állítjuk, akkor kijelölhetünk alapkijelöltnek, egy választási lehetőséget.
Ha szerepel a multiple jellemző, akkor több lehetőséget is kijelölhetünk, alapkijelöltnek. - defaultSelected: Ez jelzi, a selected jellemző állapotát.
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.
Egy általánosan használható adatnyilvántartó bemutatója
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.
Program megírása:
Megírása XHTML fájlban:
<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>
Megírása CSS fájlban:
#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;}
Megírása javascript (js) fájlban:
// 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;
}
}
}
}