Prostorová navigace

Prostorová navigace je schopnost navigace k zaměřitelným prvkům na základě jejich pozice v daném prostoru. Prostorová navigace je nutností, když váš web nebo aplikace musí reagovat na klávesy se šipkami, dokonalým příkladem je televize s dálkovým ovládáním. Aplikace Firefox OS TV jsou jednoduše HTML5 zabalené v bezchromovém prostředí prohlížeče (Gecko), takže většina aplikací vyžaduje prostorovou navigaci, aby bylo zajištěno, že fyzické dálkové ovládání televize je užitečné. Luke Chang z Mozilly vytvořil SpatialNavigation, aby byla implementace navigace v JavaScriptu snadná a flexibilní!

Zobrazit ukázku

SpatialNavigation se může pochlubit funkcemi jako:

  • Zcela stylovatelné prvky zaměření
  • Definovatelné oblasti
  • Integrace s jQuery
  • Úžasný výkon

Jednoduchý příklad použití SpatialNavigation:

// Initialize
SpatialNavigation.init();

// Define navigable elements (anchors and elements with "focusable" class).
SpatialNavigation.add({
  selector: 'a, .focusable'
});

// Make the *currently existing* navigable elements focusable.
SpatialNavigation.makeFocusable();

// Focus the first navigable element.
SpatialNavigation.focus();
<body>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <div class="focusable">Div 1</div>
  <div class="focusable">Div 2</div>
</body>
/* Add style to the focused elements */
a:focus, .focusable {
  outline: 2px solid red;
}

Zatímco výše uvedená ukázka je poměrně jednoduchá, víme, že dynamické aplikace jednoduché nejsou. Úložiště SpatialNavigation obsahuje více než tucet jedinečných příkladů použití nástroje, od těch nejzákladnějších až po velmi složité. Doporučuji vám prozkoumat tyto ukázky, abyste viděli vše, co SpatialNavigation nabízí.

Zobrazit ukázku

Prostorová navigace může hrát roli i na webových stránkách pro stolní počítače; mnoho webů v současné době používá rozvržení mřížky flexbox, které by mohlo skvěle využít směrové šipky. Měli byste si dávat pozor na CMD+up a CMD+dolů pro posouvání po celé stránce, samozřejmě, ale prostorová navigace v tomto prostoru by byla užitečná.