Ez az első
cikkem. Inkább egy kis kreativitást adok át, mint tudást. Így kezdésnek, valami
látványos dolgot terveztem, íme.
A mai weblapok
nagy többsége használ flash-t. Ez egy szép dolog. Magam is szoktam vele
dolgozni, de nekem ez túlságosan is RAD. Így maradt a JavaScript. Mikor az
oldalunkat terveztem, elsődleges szempont volt az áttekinthetőség. Így egy
csoportosított menürendszert találtam ki.
A JavaScript egy
kliens oldalon futó program, amit html oldalon történt eseményekhez lehet társítani.
A JavaScript eléri az oldal összes elemét (form mezők, képek, az oldal
tulajdonságai...). Ez azért jó, mert ezeket lehet módosítani. Erre épül az első
menü is. Ez a html által használt layerek visibility tulajdonságát állítja át.
Egy html elemet a
document.elemnév utasítással lehet elérni.
Fontos! Mivel az
IExplorer és a Netscape különféle módon generálják a layereket, ezért vigyázni
kell a kompatíbilisságra (azaz, hogy lehetőleg mindkettőn fusson). Az itt leírt
módszerek IExplorerre íródtak és működtek is. Fontos az is, hogy a JavaScript
case sensitive nyelv, azaz különbséget tesz a kis és nagybetűk között. Először
ezt ajánlatos ellenőrizni, ha valami nem működik.
Layerek
Sok layeres
cikkben így mutatják be a layert: "Aki dolgozott már korszerű
képfeldolgozóval, az találkozott a layerekkel is". Ilyen például a
PaintShop Pro is. De ez lényegtelen. A layer egy fóliának felfogható valami,
lehet rá tenni képet, linket, szöveget, mindent! Hogy miért jó ez? Hát pl.
egymásra tudsz rakni két képet, de semmi olyat nem lehet vele csinálni, amit
egy jó képszerkesztő nem tud.
A layer
definíciója:
<div
id="layer" style="position:absolute, left:100px, top:100px,
width:100px, height:100px, visibility:visible">
Ez gondolom
magáért beszél. Kivéve a visibility-t ez arra jó, hogy a layert el lehet
tüntetni. Lehet visible, vagy hidden (gyk.: visible = látható hidden =
rejtett).
Összefüggések
Tehát akkor itt
jön a lényeg. Először is kreálni kell egy linket, mivel az alap html
szabványban a képeknek, szövegeknek nincs egérérzékelő metódusuk. Ez a link
lehet mondjuk ilyen:
<a
href="#" onClick="mutat()">Mutat</a>
Az onclick, az az
esemény, amihez a JavaScript függvényt társítjuk. Ez akkor következik be, ha
kattintanak a linkre, ami persze már lehet kép is és szöveg is. Itt egy
megjelenítési függvényt lehet hívni. Most kell egy, ami eltünteti a layert:
<a
href="#" onClick="rejt()">Rejt</a>
Ez után meg kell
csinálni a layert. A layernél a id a layer neve, így tehát:
<div
id="layer" style="position:absolute (ennek az a lényege, hogy
mindig a böngésző ablakára vonatkozik a layer pozíciója, nem a div kezdetére),
left:100px, top:100px, width:100px, height:100px, visibility:
hidden">Menu 1 </div>
Most jön a
JavaScript függvény. Ezt <script language="javascript">
</script> tag-ek közé kell zárni. Lehetőleg a fájl elejére kerül. Jobb
ezt megszokni, hogy ne keverjük az oldalon össze-vissza a JavaScript
részleteket. Olyan ez, mint a más nyelvekben megszokott deklaráció és a
függvények megírása, miután ezeket megvalósítottuk, már a teljes programból
hivatkozhatunk rájuk. Nem utolsó sorban pedig a JS kód külön szöveges fájlban
is elhelyezhető, általában .js kiterjesztéssel és ekkor nem kell minden html
lapra külön beírni az egészet: <script language="JavaScript"
src="menu.js"></script>
Tehát:
<script
language="javascript">
function Mutat()
{
var layer =
document.all["layer"].style;
A function
gondolom ismerős más nyelvekből. Azért nem document.layer névvel hivatkoztam
rá, mert a layerek nem tartoznak külön csoportba. Így az oldal összes eleméből
vettem ki, név szerint. A var szintén ismerős lehet. Változó deklarációt
(definíciót is, mint jelen esetben) tesz lehetővé.
layer.visibility
= "visible";
}
Tulajdonképpen
itt a létrehozott változó által mutatott objektum visibility tulajdonságát
állítottam láthatóra. A rejt függvény ugyanez azzal a különbséggel, hogy a
láthatóságot megszüntetjük, de azért leírom.
function Rejt() {
var layer =
document.all["layer"].style;
layer.visibility
= "hidden";
}
</script>
Csak a visible-t
kellett hidden-re átírni. Hát ennyi. Így ha ráklikkeltünk a linkre, akkor
megjelenik a layer. Ha a másik linkre kattintunk, akkor eltűnik.
Ennek
felhasználásával egy igen pofás kis menüt lehet összedobni. A mi oldalunkon
(http://www.dblegends.ini.hu) ugyanilyen menü van. Nálunk az onmouseover (az
egér a kép fölött halad át) eseményhez van rendelve a mutatás. Az elrejtés
pedig az "almenü"-n való kattintáshoz. Ha függvény paraméterként
átadod a layer nevét, akkor egy csomó gépeléstől mented meg magad. Így nem kell
minden layerre új függvényt írni. Végül, hogy az aktivált menü eltűnjön, ha
másik "főmenü"-re viszed az egeret, bevittem egy globális változót.
Ez aktiv névre hallgat. Annak a layernek a nevét tartalmazza, ami épp látható.
Ezt a megjelenítése után teszem bele.
Az előzőt (megnyitott almenüt, amit az előző megnyitásnál tettem bele), pedig
eltüntetem. Egyetlen hátránya, hogy ha megjelenítesz egy almenüt, és újra
ráviszed az egeret, akkor eltűnik. És ha még egyszer ráviszed, nem jelenik meg.
Bár most erre is kitaláltam valamit. Ellenőrizni kell, hogy az aktiv egyenlő-e
a most megjelenítettel. Ha igen, akkor nem kell eltüntetni.
A teljes kód
megtekinthető a fent leírt oldal forrásában és ott a működés is
tanulmányozható.