HTML und XHTML, Skript
Die Technik bezieht sich auf:
Das Ziel dieser Technik ist es, einen Mechanismus zur Neugliederung von Komponenten zur Verfügung zu stellen, der sowohl äußerst einsatzfähig als auch barrierefrei ist. Die zwei gängigsten Mechanismen zur Neugliederung sind, Benutzer zu einer Einstellungsseite zu schicken, auf der sie Komponenten nummerieren können oder es ihnen zu ermöglichen, die Komponenten zu der gewünschten Position zu ziehen und dort loszulassen. Die ziehen-und-loslassen-Methode ist sehr viel brauchbarer, da sie es dem Benutzer erlaubt, die Elemente an Ort und Stelle anzuordnen, eines nach dem anderen, und so ein Gefühl für die Ergebnisse zu bekommen. Leider ist ziehen-und-loslassen auf den Gebrauch einer Maus angewiesen. Diese Technik erlaubt es Benutzern, mit einem Menü auf den Komponenten zu interagieren, um diese an Ort und Stelle auf geräte-unabhängige Weise neu zu gliedern. Sie kann anstelle oder zusammen mit einer ziehen-und-loslassen-Funktion zur Neugliederung benutzt werden.
Das Menü ist eine Liste mit Links, die den geräte-unabhängigen onclick-Event benutzt, um Skripte auszulösen, die den Inhalt neu gliedern. Der Inhalt wird, nicht nur visuell, im Document Object Model (DOM) neu gegliedert, so dass er für alle Geräte in der richtigen Reihenfolge ist.
Dieses Beispiel zeigt eine auf- und absteigende Neugliederung. Diese Vorgehensweise kann auch für eine zweidimensionale Neugliederung benutzt werden, indem man die Optionen links und rechts hinzufügt.
Die Komponenten in diesem Beispiel sind Listenelemente in einer ungeordneten Liste. Ungeordnete Listen sind ein sehr gutes semantisches Modell für Sets mit ähnlichen Elementen, wie diese Komponenten. Die Menü-Vorgehensweise kann auch für andere Arten von Gruppierungen benutzt werden.
Die Module sind Listenelemente und jedes Modul, zusätzlich zu Inhalten in div-Elementen, enthält ein Menü, das als verschachtelte Liste dargestellt wird.
Code-Beispiel:
<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>Da wir das Anzeigen und Verstecken von Menüs in den einfachen Baum-Beispielen behandelt haben, konzentrieren wird uns hier nur auf den Code, der die Module austauscht. Sobald wir die Events harmonisieren und die Standard-Link-Aktion aufheben, machen wir uns an die Arbeit. Zuerst legen wir eine Reihe von lokalen Variablen für die Elemente fest, mit denen wir arbeiten werden: das Menü, die neu zu gliedernden Module, den menuLink. Dann, nachdem wir die Richtung der Neugliederung geprüft haben, versuchen wir den zu tauschenden Knoten zu packen. Wenn wir einen finden, rufen wir dann swapNode() auf, um unsere zwei Module zu tauschen, und PositionElement(), um das absolut positionierte Menü zusammen mit dem Modul zu bewegen und dann setzen wir den Fokus wieder zurück auf den Menüpunkt, der das Ganze in Bewegung gesetzt hat.
Code-Beispiel:
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();
}Das CSS für den Tausch des Knotens ist nicht viel anders als das unserer vorhergehenden Baum-Beispiele, mit ein paar Anpassungen bei der Größe und Farbe für die Module und das kleine Menü.
Code-Beispiel:
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%; }Finden Sie alle Komponenten in der Web-Einheit, die per ziehen-und-loslassen neu gegliedert werden können.
Prüfen Sie, ob es auch einen Mechanismus gibt, um diese neu zu gliedern, indem man Menüs, die aus Listen mit Links gebildet wurden, benutzt.
Prüfen Sie, ob die Menüs innerhalb der neu gliederbaren Elemente im DOM enthalten sind.
Prüfen Sie, ob Skripte zur Neugliederung nur durch den onclick-Event der Links ausgelöst werden.
Prüfen Sie, ob die Elemente im DOM neu gegliedert wurden und nicht nur visuell.
#2 bis #5 sind wahr.
Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.