Viselkedések

Viselkedések (Behaviors) alkalmazásával lehetõségünk nyílik arra, hogy a felhasználó cselekedetei hatására változások történjenek oldalunkon. A DreamWeaver a viselkedések megteremtéséhez JavaScript-et használ. (Egyébként ez nem csak JavaScripttel, hanem más, kliens oldali scriptnyelvek segítségével – pl.: VBScript - illetve appletek, Flash mozik, stb. alkalmazásával is lehetséges.)

A Viselkedések három részbõl állnak:
- Akció:
Ez maga a változás, ami valamilyen esemény hatására történik.
- Esemény:
Minden akcióhoz tartozik egy esemény, az adott akció ennek hatására fog lejátszódni. Egy eseményhez több akciót is kapcsolhatunk, ilyenkor azok a meghatározott sorrendben fognak lejátszódni.
- Elem:
Az a dolog, amihez az események és a hozzájuk tartozó akciók kötõdnek. Egy elemhez több ilyen esemény-akció páros is köthetõ.

FONTOS:
A lejátszódó akciók nem feltétlen a felhasználó cselekedeteire jönnek létre, más, tõlük független események is kiválthatják az akció végrehajtását (pl.: az akció egy kép letöltõdésekor játszódik le).
Tudni kell, hogy nem minden böngészõ támogat minden eseménykezelõt, illetve azok használatát bizonyos elemeken.


Behaviors paletta (Window / Behaviors)

- + gomb:
Akció hozzáadása. Maga az akció a rákattintás után megjelenõ menübõl választható ki.
- - gomb:
Akció törlése. Válasszuk ki a törölni kívánt akciót, majd kattintsunk rá.
- Events for:
Ebben a legördülõ menüben állíthatjuk be, hogy milyen eseménykezelõket alkalmazhatunk. Minden büngészõ más-más eseménykezelõkkel rendelkezhet fajtától, ill. verziótól függõen.
- Le, fel nyilak:
Ezek segítségével állíthatjuk be az ugyanazon esemény hatására bekövetkezõ akciók lejátszódási sorrendjét.
- A használni kívánt eseménykezelõt az akció elõtt található legördülõ menübõl választhatjuk ki.

A paletta címsorában láthatjuk az elemet (pl.: <img>), amihez a viselkedést kötni akarjuk.


Eseménykezelõk


Viselkedés illesztése egyes elemekhez

  1. Válasszuk ki a kívánt elemet (Ha az egész dokumentumot akarjuk, klikkeljünk a státusz soron lévõ <body> tag-re).
  2. Nyomjuk le a + gombot a palettán
  3. Válasszuk ki a megfelelõ akciót
  4. Adjuk meg az akció paramétereit
  5. Ha az alapértelmezett eseménykezelõ nem megfelelõ számunkra, válasszunk egy másikat az akció elõtt található legördülõ menüben. Egyes eseménykezelõk zárójelben vannak. Ez azt jelenti, hogy ahhoz, hogy az adott eseménykezelõ mûködjön, valahogy át kell alakítani az adott elemet (pl. képekbõl hivatkozást kell csinálni, hogy az onMouseOver mûködjön). A zárójeles eseménykezelõ választásakor a program automatikusan elvégzi a szükséges módosításokat.

Viselkedés illsztése Timeline-okhoz

  1. A Timeline B csatornáján kattintsunk duplán arra a képkockára, ahol a viselkedést el kívánjuk helyezni.
  2. Válasszuk ki az alkalmazni kívánt akciót, adjuk meg paramétereit. Természetesen az akciók nem csak a Timeline elemeire lehetnek hatással, hanem az oldalon található bármely objektumra.

A Timeline-okhoz rögzített egyetlen lehetséges eseménykezelõ az onFrameX.


A hozzárendelt akciók megváltoztatása

Egy akció paramétereit megváltoztathatjuk, ha a Behaviors palettán duplán kattintunk a kívánt akcióra.


Az egyes akciók használata

Call Javascript:
Javascript parancsot, vagy egy általunk megírt funkciót hívhatunk meg segítségével. A hívás az eval parancs segítségével kerül kiértékelésre.

Change Property:
Egy elem tulajdonságai változtathatók meg segítségével. Bizonyos böngészõk bizonyos elemekre nem képesek alkalmazni. A megjelenõ párbeszéd ablakban elõször válasszuk ki a megváltoztatni kívánt objektum típusát, majd magát az objektumot. Ezután válasszuk ki a legördülõ menübõl, vagy adjuk meg manuálisan a megváltoztatni kívánt tulajdonságot. A New Value pontban adjuk meg a tulajdonság új értékét.

Check Browser:
Használatával megállapíthatjuk, hogy a felhasználó milyen böngészõvel tekinti meg oldalunkat, és az eredménytõl függõen automatikusan egy másik oldalt tölthetünk be számára. A Netscape… melletti szövegmezõben beállíthatjuk, hogy a Netscape Navigator megadott verziója, ill. késõbbi esetén maradjunk ezen a lapon (Stay on this Page), ugorjunk egy URL-re (Go to Url), vagy ugorjunk egy alternatív URL-re (Go to Alternate URL). Az alatta lévõ sorban megadhatjuk, mi történjen abban az esetben, ha a Netscape a megadott verziószámnál kisebb. Ugyanezen beállításokat elvégezhetjük Internet Explorerre, illetve egyéb böngészõkre (bár ezeknél a verziószám érzékelés kimarad). Az URL, ill. Alt URL pontokban határozzuk meg a fenti beállításokhoz használt hivatkozásokat.

Check Plugin:
Átirányíthatjuk a böngészõt egy másik oldalra, attól függõen, hogy bizonyos Plugin (ill. Flash és Shockwave esetén Active-X vezérlõelem) telepítve van-e a kliens gépen. A Plugin pontban kiválaszthatjuk (Select), vagy manuálisan megadhatjuk (Enter) az ellenõrizni kívánt Plugin-t.
Az If Found, Go to URL pontban adjuk meg annak az oldalnak a címét, amelyet akkor akarunk megjeleníteni, ha a kliens gép rendelkezik a keresett Plugin-nel. (Ennek a pontnak a meghatározása nem kötelezõ.) Amennyiben nem találtunk megfelelõ Plugint, az ez alatt megadott oldalt fogja a böngészõ megjeleníteni.
Az alsó jelölõnégyzetet bekapcsolva - amennyiben az ellenõrzés valamilyen oknál fogva nem lehetséges,- mindig arra a hivatkozásra fog a böngészõ ugrani, amit arra az esetre adtunk meg, hogy a keresett Plugin megvan.

Control Shockwave or Flash:
Használatához kell, hogy legyen az oldalon egy beillesztett, névvel rendelkezõ Shockwave, vagy Flash mozi. A Movie pontban kiválaszthatjuk, hogy melyik mozival akarunk dolgozni.

Az Action részen határozzuk meg, hogy az adott mozival mi történjen:
Play: Lejátszás folytatása
Stop: Lejátszás leállítása
Rewind: Mozi visszatekerése az elsõ képkockához
Go to Frame: Megadott képkockához ugrás a moziban.

Drag Layer
Rétegek Drag&Drop típusú mozgatására használjuk. Legcélszerûbb ezt az akciót a BODY elemmel összekapcsolni egy onLoad eseménykezelõ segítségével. Ez azért fontos, mert a scriptnek még azelõtt le kell futnia, hogy a felhasználó megpróbálná a meghatározott réteget mozgatni.

- Basic rész:
- Layer: A réteg neve, amihez megadjuk a mozgatásával kapcsolatos paramétereket.
- Movement: A mozgás típusa
- Unconstrained: Szabad
- Constrained:
Behatárolt. Ebben az esetben a megjelenõ szövegmezõkben definiálhatunk egy, a réteg kezdeti helyzetéhez viszonyított mozgási teröletet (px).
- Drop Target:
Egy célpontot adhatunk meg a réteg "ledobásához". A Get Current Position gomb használatával lekérhetjük az adott réteg aktuális pozícóját.
- Snap If Within:
Itt egy értéket adhatunk meg pixelben, és ha a réteg ledobás elõtti távolsága ezen az értékhatáron belül van a Drop Target pontban megadott koordinátákhoz képest, akkor a réteg a Drop Targetnél megadott pontba fog igazodni.
- Advanced rész:
- Drag Handle:
- Entire Layer:
A réteg területén belül bárhol megragadhatjuk azt.
- Area Within
Layer:
A réteg "megragadása" csak területének egy meghatározott részén lesz lehetséges. Ezt a részt tudjuk megadni a megjelenõ szövegmezõkben (px).
- While Dragging: Mozgatás közben mi történjen:
- Bring
to Front:
Bejelölve mozgatás közben a réteg Z-indexe átállítódik, hogy ez legyen a legmagasabb (ez a réteg legyen legfelül).
- Then:
Ebben a menüben határozzuk meg, hogy a mozgatás végeztével mi történjen a réteggel:
- Leave on
Top:
Maradjon legfelül.
- Restore
Z-index:
Álljon vissza eredeti magasságába
- Call
Javascript:
Javascript meghívása mozgatás közben (pl. akkor alkalmazzuk, ha mozgatás közben mindig ki akarjuk valahová írni a réteg éppen aktuális koordinátáit).
- When Dropped
Call Javascript:
Lerakáskor Javascript hívása.
   - Only if Snapped: Ezt a pontot bejelölve csak akkor lesz meghívva a fentebb megadott JS, ha a réteg a mozgatás befejeztével a Drop Target pontba került.

Go To URL:
Megadott URL betöltése a kiválasztott ablakokba, frame-ekbe. Minden egyes Frame-nek, ill. ablaknak külön megadhatjuk, hogy milyen URL-t jelenítsen meg.

Jump Menu, Jump Menu Go:
Lásd: Formanyomtatvány elemek – Jump Menu

Open Browser Window:
Egy adott URL-t jeleníthetünk meg egy új böngészõ-ablakban. A létrejövõ ablaknak beállíthatjuk szinte az összes tulajdonságát.

- URL to Display: Az új ablakban megjelenítendõ hivatkozás
- Window width:
A létrejövõ ablak szélessége
- Window height:
Magassága
- Attributes:
Az új ablak tulajdonságait állíthatjuk itt be, egyszerûen jelöljük be az ablak megjeleníteni kívánt részeit.
Window Name:
A létrehozandó ablak neve. Ez alapján tudunk majd a késõbbiekben a létrejött ablakra hivatkozni, ha valamit meg akarunk jeleníteni benne.

Ha nem adunk meg méreteket a létrehozandó ablakhoz, akkor a méretek, tulajdonságok meg fognak egyezni az eredeti ablak méreteivel és tulajdonságaival.

Play Sound:
Hangokat, zenét játszhatunk le a segítségével. Használatához a kliensnek rendelkeznie kell az adott hangformátum lejátszását biztosító pluginnel. A hangfile meghatározásához adjuk meg az elérési útvonalát (vagy Internetes címét) a párbeszéd ablakban.

Popup-message:
Egy általunk definiált szöveggel rendelkezo üzenet-ablakot jeleníthetünk meg segítségével. A megjeleno ablak csak egy OK gombbal fog rendelkezni. Tájékoztató szövegek megjelenítésére szoktuk használni ezt az akciót.
Kapcsos zárójelek között JavaScript funkciókat, tulajdonságokat, globális változókat, kifejezéseket is beillszthetünk az üzenetablakba (pl.: Az oldalon található hivatkozások száma: {document.links.length}).

Preload Images
Elore letölthetjük használatával az alaphelyzetben az oldalon meg nem jeleno képeket, így ha valamilyen dinamikus képcserét végzünk majd a dokumentumban, nem kell várnunk az új kép letöltodésére, hiszen az már benne lesz a böngészo cache-ében.
Ezt az akciót a BODY taghez érdemes illeszteni onLoad eseménykezelovel.

Set Nav Bar Image:
A Nav Bar objektum(Object paletta / Navigation Bar):
Segítségével egy navigációs menüt készíthetünk oldalunkra

- Nav Bar Elements: A navigációs menü elemei, sorrendjük.
- Element Name:
Az adott elem neve, Ez a JavaScript alkalmazás miatt fontos.
- Up Image:
A menü-elemhez tartozó kép (alapállapot).
- Over Image:
Az a kép, ami akkor jelenik meg, ha a menüelem fölött tartózkodunk a pointerrel.
- Down Image:
A menüpontra klikkelve megjelenítendo kép.
- Over While Down:
Ez a kép jelenik meg, ha az adott menüelemen lenyomva tartjuk az egérgombot.
- When Clicked Go
to URL:
Az elemre történt kattintás hatására megjeleníteni kívánt hivatkozás.
     - In: A frame, vagy ablak, amiben a megadott hivatkozást meg akarjuk jeleníteni.
- Options: Egyéb beállítási lehetoségek:
- Preload Images:
A különbözo állapotokhoz tartozó képek elore letöltése (ld. Preload Images akció).
- Show Down Image
Initially:
Alaphelyzetben a menüponthoz tartozó képek közül a lenyomott állapothoz hozzárendelt jelenjen meg.
- Insert: A beillesztésnél használt elrendezés:
- Horizontally: Vízszintes elhelyezés
- Vertically: Függoleges elhelyezés
- Use Tables: Bekapcsolva az elemek egy táblázatba rendezve fognak beillesztésre kerülni.

Az akció:
A navigációs menü elemeinek különbözo állapotaihoz tartozó képek, ill. a megjeleníteni kívánt URL dinamikus megváltoztatására használjuk.

A hozzá tartozó Basic rész használata megegyezik a Navigation Barnál leírtakkal.

Advanced:
A legördülo menübol kiválaszthatunk egy állapotot, és ha az adott menüpont a kiválasztott állapothoz tartozó képet mutatja, megadhatjuk az Also Set pontnál, hogy a többi elem milyen állapotba kerüljön (illetve milyen képet jelenítsen meg).

A Navigation Bar-on egy ikonra klikkelve az össze többi Up helyzetbe fog kerülni alapértelmezett helyzetben. Ha ezt el akarjuk kerülni, akkor a Set NavBar Image akciót kell használnunk.

Set Text of Frame:
Egy frame-hez tartozó HTML kódot alakíthatunk át vele. Lehetoségünk van a dinamikusan létrehozandó kódba különbözo scriptek beillesztésére is.

A Get Current HTML gombot lenyomva az adott frame éppen aktuális HTML kódját tudjuk lekérni.
Ha bekapcsoljuk a Preserve Background Color mezot, az új változat meg fogja tartani az eredeti háttér, szöveg, ill. link színeit.

Set Text of Layer:
Ugyanaz, mint a Set Text of Frame, de itt egy réteg tartalmát módosíthatjuk.

Set Text of Status Bar:
Ezzel a böngészo státuszsorának szövegét változtathatjuk meg. Értelemszeruen ide képek (<img>) nem szúrhatóak be. Itt is van lehetoségünk kapcsos zárójelek között JavaScript beillesztésre (ld.: Popup-Message).

Set Text of Textfield:
Egy, az oldalon található szövegmezo tartalmát változtathatjuk meg segítségével.

Show / Hide Layers:
Rétegeket tüntethetünk el, vagy jeleníthetünk meg alkalmazásával. Minden egyes rétegnek (bármelyik frame-ben is vannak) megadhatjuk, hogy látható (Show), vagy rejtett (Hide) legyen, ill. láthatósága ne változzon (Default).

Swap Image:
Képek dinamikus cseréje hajtható végre vele a kép objektumok src (forrás) tulajdonságának megváltoztatásával. Fontos, hogy a torzulás elkerülése érdekében ugyanakkora képet adjunk meg cserének.

Az akció használata elott nevet kell adni a kívánt Image objektumoknak!

- Images: Itt választhatjuk ki, hogy melyik képen akarunk változtatni.
- Set Source to: Megadjuk az új kép helyét.
- Preload Images: Bekapcsolva elore letöltjük a csereképet is.
- Restore Images
onMouseOut:
Bekapcsolva az MouseOut esemény hatására a képek visszaállnak eredeti helyzetükbe.

Swap Image Restore:
Az adott elemen az utoljára végrehajtott Swap Image akció utáni állapotot állítja vissza az azt megelozobe.

Go To Timeline Frame:

Használatával a Timeline egy általunk megadott képkockájához ugorhatunk.
- Timeline: Megadjuk, hogy melyik Timeline-nal dolgozunk.
- Go To Frame: Meghatározzuk, hogy hanyadik képkockára akarunk ugrani.
- Loop: Ez a bizonyos ugrás hányszor történjen meg egymás után.

FONTOS:
A loop mezohöz CSAK akkor rendeljünk értéket, ha a viselkedést az adott Timeline egyik képkockájához csatoltuk!

Play Timeline:
Egy megadott Timeline lejátszását kezdhetjük meg, vagy folytathatjuk vele.

Stop Timeline:
Megállíthatjuk a kiválasztott (ill **ALL TIMELINE ** esetén az összes) Timeline lejátszását (Play Timeline akció hatásaként innen fog az animáció folytatódni).

Validate Form:
Egy formanyomtatvány szöveges részeinek kitöltésének helyességét ellenorizhetjük az akció segítségével. Ezt az akciót köthetjük az adott FORMhoz egy onSubmit eseménykezelovel, vagy az egyes mezokhöz onChange, vagy onBlur eseménykezelo alkalmazásával.

- Named Fields: Az ellenorizendo mezo(k).
- Value Required: Bekapcsolva az adott mezo üres értéket nem fog elfogadni.
- Accept: Az alpontokban határozhatjuk meg, hogy milyen értéket fogad el helyesnek a FORM.
- Anything: Bármit
- Number: Bármilyen számot (római számokat persze nem).
- Email address: Bármilyen olyan karaktersorozatot, amiben megtalálható a @ karakter.
- Number from to: A két megadott számérték közötti számokat.


Megjegyzések

Természetesen az alkalmazható akciók száma korlátlan, lehetoségünk van saját akciók megírására is.

 

>>Vissza a tartalomhoz


Untitled Document