SCR27: Az oldal tartományainak átrendezése a dokumentum objektum modell segítségével
Alkalmazás
HTML és XHTML, szkriptek
Ez a technika az alábbiakra vonatkozik:
Leírás
A technika célja egy olyan mechanizmus biztosítása, amely a leghasználhatóbb és legakadálymentesítettebb komponensek újrarendezését szolgálja. Az átrendezés két legelterjedtebb mechanizmusa a felhasználónak küldött beállítási lapon alapszik, amelyen a felhasználó vagy beszámozza az elemeket, vagy megfogja és a kívánt helyre teszi őket. A mozgatásos módszer sokkal hasznosabb, mivel a felhasználó egyesével a helyére rendezheti az elemeket és ezáltal érzelmileg is képes azonosulni az eredménnyel. Sajnos a mozgatásos technika teljes egészében az egérkezelésen alapszik. A másik módszer segítségével a felhasználók hardver független módon a komponensekre ható menün keresztül végezheti el az elemek térbeli átrendezését. Ez a mozgatásos művelet helyett, vagy azzal együttműködve is alkalmazható.
A menü olyan hivatkozások listája, amely hardver független onclick eseményt használ a tartalmat átrendező szkript indítására. A tartalom a dokumentum objektum modellben (DOM) nem csak vizuálisan, hanem a hardvereknek megfelelő helyes sorrendre is átrendezésre kerül.
Példák
1. példa
Ebben a példában függőleges irányú átrendezés történik. Ez a megközelítés, bal és jobb irányú opciók biztosításával, kétdimenziós átrendezésre is használható.
Az alábbi példa komponensei egy rendezetlen lista elemei. A rendezetlen listák nagyon jó szemantikus modelljei az ilyen komponensekhez hasonló elemek beállításának. A menü megközelítés más csoportosítások elvégzésére is használható.
A modulok lista elemekként szerepelnek és minden egyes modul, a doboz elemek tartalmán felül, egy beágyazott listaként megjelenő menüt is tartalmaz.
Példa kód:
<ul id="swapper">
<li id="black">
<div class="module">
<div class="module_header">
<!-- menu link -->
<a href="#" onclick="ToggleMenu(event);">menu</a>
<!-- menu -->
<ul class="menu">
<li><a href="#" onclick="OnMenuClick(event)"
onkeypress="OnMenuKeypress(event);">up</a></li>
<li><a href="#" onclick="OnMenuClick(event)"
onkeypress="OnMenuKeypress(event);">down</a></li>
</ul>
</div>
<div class="module_body">
Text in the black module
</div>
</div>
</li>
...
</ul>
Mivel az előzőekben már tárgyaltuk az egyszerű fa mintájú menük megjelenítésének és elrejtésének a kérdését ezért ebben a példában csak a modulokat váltogató kódok kerülnek előtérbe. A munka az események harmonizációja és a hivatkozás alapértelmezett műveletének törlése után indulhat. Az elemek esetében először számos helyi beállítás kerül meghatározásra. Ezek a menü, az átrendezendő modul és a menuLink. Ezt követően az átrendezés iránya kerül ellenőrzésre, majd a váltás csomópontját kell meghatározni. Amennyiben ezt megtaláltuk a swapNode() segítségével átváltjuk a két modulunkat és a PositionElement() segítségével elmozdítjuk a modul mentén az abszolút módon pozícionált menüt. Ezt követően visszaállítjuk a fókuszt az egész művelet kiindulópontjaként szolgáló menüelemre.
Példa kód:
function MoveNode(evt,dir)
{
HarmonizeEvent(evt);
evt.preventDefault();
var src = evt.target;
var menu = src.parentNode.parentNode;
var module = menu.parentNode.parentNode.parentNode;
var menuLink = module.getElementsByTagName("a")[0];
var swap = null;
switch(dir)
{
case 'up':
{
swap = module.previousSibling;
while (swap && swap.nodeType != 1)
{
swap = swap.previousSibling;
}
break;
}
case 'down':
{
swap = module.nextSibling;
while (swap && swap.nodeType != 1)
{
swap = swap.nextSibling;
}
break;
}
}
if (swap && swap.tagName == node.tagName)
{
module.swapNode(swap);
PositionElement(menu,menuLink,false,true);
}
src.focus();
}
A csomópont váltásának CSS formázása nem sokban különbözik attól, ami az előzőekben tárgyalt fa mintánál alkalmazásra került. Ez egy kisebb menü, illetve a modulok, szín és méret beállítását tartalmazta.
Példa kód:
ul#swapper { margin:0px; padding:0px; list-item-style:none; }
ul#swapper li { padding:0; margin:1em; list-style:none; height:5em; width:15em;
border:1px solid black; }
ul#swapper li a { color:white; text-decoration:none; font-size:90%; }
ul#swapper li div.module_header { text-align:right; padding:0 0.2em; }
ul#swapper li div.module_body { padding:0.2em; }
ul#swapper ul.menu { padding:0; margin:0; list-style:none; background-color:#eeeeee;
height:auto; position:absolute; text-align:left; border:1px solid gray; display:none; }
ul#swapper ul.menu li { height:auto; border:none; margin:0; text-align:left;
font-weight:normal; width:5em; }
ul#swapper ul.menu li a { text-decoration:none; color:black; padding:0 0.1em;
display:block; width:100%; }
Ellenőrzések
Folyamat
-
Találja meg az összes olyan komponenst, amely a mozgatásos módszerrel átrendezhető.
-
Ellenőrizze, hogy van-e olyan mechanizmus a lapon, amely hivatkozások listáján keresztül oldja meg az átrendezést.
-
Ellenőrizze, hogy a menük a DOM újrarendezhető elemein belül helyezkednek-e el.
-
Ellenőrizze, hogy az újrarendezéshez szükséges szkripteket csak a hivatkozások onclick eseménye aktiválja-e.
-
Ellenőrizze, hogy az elemek nem csak vizuálisan de a DOM-ban is átrendezésre kerültek-e.
Elvárható eredmények
- A 2. és 5. pontok igazak.