SCR28: Nyitható és zárható menük használata a tartalom blokkjainak elkerülésére
Alkalmazás
Kliens-oldali szkripteket biztosító technológiák.
Ez a technika az alábbiakra vonatkozik:
Leírás
Ez a technika lehetővé teszi az ismétlődő tartalmi elemek átugrását. Ezt az adott tartalomra vonatkozó, illetve a felhasználó által nyitható és csukható menükkel lehet megoldani. A felhasználó a menü becsukásával tudja átlépni az ismétlődő tartalmat. A felhasználó egy interfész vezérlő segítségével rejti vagy távolítja el a menü elemeit. A források között számos olyan menükre, eszközsorokra és keresőfákra vonatkozó technika található, amely hatékony eszközt kínál az átugró navigációhoz.
Megjegyzés: A szerver-oldali szkriptek és az oldal módosításának újratöltése számos hasonló megközelítési módot kínál.
Példák
1. példa
A weblap tetején található navigációs hivatkozások hozzáférést biztosítanak mind a HTML, a CSS, vagy a JavaScript eljárással készült menükhöz. A navigációs eszköz megnyitásakor a navigációs hivatkozások válnak elérhetővé a felhasználó számára. A navigációs eszköz becsukásakor a hivatkozások alkalmazási lehetősége is megszűnik.
Példa kód:
...
<script type="text/javascript">
function toggle(id){
var n = document.getElementById(id);
n.style.display = (n.style.display != 'none' ? 'none' : '' );
}
</script>
...
<a href="#" onclick="toggle("navbar")">Toggle Navigation Bar</a>
<ul> id="navbar">
<li><a href="http://target1.html">Link 1</a></li>
<li><a href="http://target2.html">Link 2</a></li>
<li><a href="http://target3.html">Link 3</a></li>
<li><a href="http://target4.html">Link 4</a></li>
</ul>
...
A Toggle navigation bar with a link című részben a példa kód egy működő verziója látható.
2. példa
Egy honlap tartalomjegyzéke minden egyes oldal tetején feltüntetésre kerül. A tartalomjegyzék kezdeténél elhelyezett gomb segítségével a felhasználó elrejtheti vagy megnyithatja a tartalomjegyzéket.
Példa kód:
...
<script type="text/javascript">
function toggle(id){
var n = document.getElementById(id);
n.style.display = (n.style.display != 'none' ? 'none' : '' );
}
</script>
...
<button onclick="return toggle('toc');">Toggle Table of Contents</button>
<div id="toc">
...
</div>
...
A Toggle table of contents with a button.című részben a kód egy működő verziója található.
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Kapcsolódó technikák
Ellenőrzések
Folyamat
-
Ellenőrizze, hogy bizonyos felhasználói interfész vezérlők lehetővé teszik-e az ismétlődő tartalmak nyitását és csukását.
-
Ellenőrizze, hogy a nyitott tartalom az algoritmikusan meghatározott tartalom olvasási sorrendjének logikusan megfeelő helyén található-e.
- Ellenőrizze, hogy a bezárt tartalom nem képezi-e részét az algoritmikusan meghatározott tartalomnak.
Elvárható eredmények
-
Minden fenti ellenőrzés igaz.