Programming the World Wide Web

Fejezet

6

6.3. Elemek mozgatása

Az előzőekben bemutattuk, hogy azok az XHTML elemek, melyeknek elhelyezése abszolút vagy relatív, elmozdíthatóak. Egy elem elmozdítása igen egyszerű: az elemek top, illetve left tulajdonságát módosítva lehetővé válik az elemek elmozdítása. Ha az elem elhelyezése abszolút (position: absolute;), akkor a top, illetve left tulajdonságok által megadott új pozícióba fog elmozdulni az elem, amenyiben pedig relatív az elhelyezés (position: relative;), akkor az eredeti pozíciójához képes fog elmozdulni.

A következő példában egy képet abszolút pozicionálást használva helyeztünk el a böngészőablakban. A dokumentum két szövegmezőt tartalmaz, „x koordináta”, illetve „x koordináta” címkékkel. A szövegmezők segítségével a felhasználó új értékeket adhat meg a top, illetve left tulajdonságoknak. Amikor megnyomjuk a „Mozdulj!” címkét viselő gombot, akkor a top, illetve left tulajdonságok a beírt értékeket veszik fel, és a kép az új helyre mozdul el.

Az alábbi példában láthatjuk azt a, külön állományban tárolt, JavaScript függvényt, melyet a top, illetve left tulajdonságok megváltoztatására használunk. Annak ellenére, hogy itt nincs rá feltétlenül szükség, a mozgatni kívánt elem azonosítója át van advaparaméterként a mozgatást végző függvénynek, illusztrálva ezzel, hogy a függvény elvileg használható bármilyen elem esetén. A két szövegmező értéke is át lesz adva paraméterként a függvénynek. Az aktuális paraméterek a szövegmezők DOM hierarchia-beli címei, ehhez adódik hozzá a value attribútum, mely a szövegmezők értékéhez való hozzáférést biztosítja. Figyeljük meg, hogy az elmozgatni kívánt kép DOM-beli címéhez a style attribútum van hozzákapcsolva, mivel a top, illetve left tulajdonságok stílusjegyek. Mivel a top, illetve left tulajdonságok szövegmezőbe beírt értékei igazából karakterléncként ábrázolt számok, ugyanakkor a top és left tulajdonságok értékéhez valamilyen mértékegységet is meg kell adni, az eseménykezelő hozzácsatolja a “px” végződést az értékekhez. A mover.html állomány, illetve a hozzá tartozó mover.js JavaScript fájl a következőképpen néznek ki:

<?xml version = "1.0" encoding = "utf-8" ?> <!IDOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> <!--mover.html mover.js állományt használja az elemek mozgatásahoz --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Mozgó elemek </title> <script type = "text/javascript" src = "mover.js" > </script> </head> <body> </form action = ""> <p> <label> x koordináta: <input type = "text" id = "xCoord" size = "3" /> </label> <br /> <label> y koordináta: <input type = "text" id = "yCoord" size = "3" /> </label> <br /> <input type = "button" value= "Mozdulj!" onclick = "moveIt('picture', document.getElementById('xCoord').value, document.getElementById('yCoord').value)" /> </p> </form> <div id = "picture" style = "position: absolute; top: 115px; left: 0;"> <img src = "images/sample1.jpg"/> </div> </body> </html> // mover.js // elemek mozgatását példázza // az elemet mozgató eseménykezelő function moveIt(movee, newTop, newLeft) { dom = document.getElementById(movee).style; // top és left tulajdonságok megváltoztatása // px végződés hozzáillesztése az értékekhez dom.top = newTop + "px"; dom.left = newLeft + "px"; }

A 6.4. ábra a mover.html dokumentumot jeleníti meg

Ugrás az oldal tetejére