Weblap Hová jutunk?

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

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:

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;
                                 }
                        }
      }
}