Programming the World Wide Web

Fejezet

6

6.6. Dinamikus tartalom

Az előbbi fejezetekben megvizsgáltuk annak a lehetőségét, hogy hogyan változtatható meg dinamikusan egy elem pozíciója, láthatósága, a szöveg betűtípusa, színe, háttérszíne, illetve stílusa. Ez a rész az XHTML elemek tartalmának megváltoztatását célozza meg. Egy elem tartalma a neki megfelelő JavaScript objektum value tulajdonságán keresztül érhető el. Egy elem tartalmának megváltoztatása igazság szerint nem különbözik alapvető módon az egyéb tulajdonságok megváltoztatásától. Az alábbiakban bemutatunk egy példát, mely a dinamikus tartalom használatát szemléltetni.

Egy űrlap (form) kitöltésében segítséget nyújthatunk a felhasználónak a böngészőben megjelenő, szövegdobozban megjelenített „segéd-szöveggel” (help box vagy súgó). A szövegdoboz tartalma változhat az egér kurzorának helyzetétől függően. Mikor a kurzor egy bizonyos bemeneti mező fölé ér, a szövegdobozban megjelenített szöveg tanácsot adhat az űrlap kitöltésére vonatkozóan. Amikor a kurzor épp nincs egyik bemeneti mező fölött sem, a szövegdoboz tartalma jelezheti csupán a segítségnyújtás lehetőségét.

A következő példában egy JavaScriptben definiált, üzeneteket tartalmazó tömb adja meg a súgóként szolgáló szövegdobozban megjeneníteni kívánt szövegeket. Amikor az egér kurzora egy bizonyos bemeneti mező fölé kerül, a mouseover esemény hatására meghívódik az eseménykezelő függvény, mely kiválasztja a szövegdobozban megjelenő, a kiválasztott bemeneti mezőnek megfelelő üzenetet. A megfelelő értéket az eseménykezelőnek átadott paraméter határozza meg. A mouseout esemény hatására a súgóként szolgáló szövegdoboz visszanyeri a „standard” értékét. Következik a fentieket szemléltető XHTML dokumentum és a hozzá tartozó JavaScript állomány:

<?xml version="1.0" enconding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll-strict.dtd"> <!--dynValue.html dynValue.js -t használja Dinamikus tartalom --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Dinamikus tartalom</title> <script type="text/javascript" src="dynValue.js" > </script> </head> <body> <form> <p style="font-weight: bold"> <span style="font-style: italic"> Kliens adatai: </span> <br /><br /> <label> Név: <input type="text" onmouseover="messages(0)" onmouseout="messages(4)" /> </label> <br /> <label> E-mailcím: <input type="text" onmouseover="messages(1)" onmouseout="messages(4)" /> </label> <br /> <br /> <span style="font-style: italic"> Saját felhasználói fiók létrehozásához az alábbi adatokat adja meg: </span> <br /> <br /> <label> Felhasználó azonosító: <input type="text" onmouseover="messages(2)" onmouseout="messages(4)" /> </label> <br /> <label> Jelszó: <input type="password" onmouseover="messages(3)" onmouseout="messages(4)" /> </label> <textarea id="adviceBox" rows="5" cols="50" style="position: absolute; left; 250px; top: 300px"> Ez a szövegdoboz segítséget nyújt az űrlap kitöltésére vonatkozóan. Vigye az egérkurzort bármelyik bemeneti mező fölé, a megfelelő tanács érdekében. </textarea> <br/> <br/> <input type="submit" value="Elküld" /> <input type="reset" value="Alapbeállítás" /> </p> </form> </body> </html> // dynValue.js // Dinamikus tartalom var helpers = ["A nevét a következőképpen kell megadni: \n \ vezetéknév keresztnév", "Az e-mailcím alakja a következő kell legyen: \ felhasználónév@doménium", "A felhasználó azonosító legalább 6 karakterből\ kell álljon", "Az ön jelszava legalább 6 karakterből kell álljon \ és legalább egy számjegyet is kell tartalmazzon", "Ez a szövegdoboz segítséget nyújt az űrlap \ kitöltésére vonatkozóan. Vigye az egérkurzort \ bármelyik bemeneti mező fölé, a megfelelő tanács \ érdekében."] //eseménykezelő, mely megváltoztatja szövegdoboz értékét function messages(adviceNumber) { document.getElementById("adviceBox").value = helpers[adviceNumber]; }

A 6.8. ábra a dynValue.html dokumentumot jeleníti meg.

Megjegyzés: A tömbértékekben egyes helyeken szereplő sorvégi „\” karakterek jelzik, hogy a karakterlánc literál folytatódik a következő sorban.

Ugrás az oldal tetejére