导航空间_空间导航

青旅半醒 2023-02-22 03:35 2阅读 0赞

导航空间

Spatial navigation is the ability to navigate to focusable elements based on their position in a given space.  Spatial navigation is a must when your site or app must respond to arrow keys, a perfect example being a television with directional pad remote.  Firefox OS TV apps are simply HTML5 wrapped in a chromeless browser shell (Gecko) so most apps require spacial navigation to ensure the physical television remote is useful.  Mozilla's Luke Chang has created [SpatialNavigation][] to make implementing JavaScript navigation easy and flexible!

空间导航是根据给定元素在给定空间中的位置导航到可聚焦元素的能力。 当您的站点或应用程序必须响应箭头键时，必须进行空间导航，一个完美的例子就是带有定向板遥控器的电视。 Firefox OS TV应用程序只是用HTML5封装在无边框浏览器外壳(Gecko)中，因此大多数应用程序需要空间导航以确保物理电视遥控器有用。 Mozilla的Luke Chang创建了[SpatialNavigation，][SpatialNavigation]以轻松，灵活地实现JavaScript导航！

[View Demo][] [观看演示][View Demo]

SpatialNavigation boasts features like:

SpatialNavigation具有以下功能：

*  Completely stylable focus elements
    
    完全可样式化的焦点元素
 *  Definable regions
    
    可定义区域
 *  Integration with jQuery
    
    与jQuery集成
 *  Awesome performance
    
    出色的表现

A simple example usage of SpatialNavigation:

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();

/* Add style to the focused elements */
    a:focus, .focusable {
      outline: 2px solid red;
    }

While the demo above is fairly simple, we know that dynamic apps are not simple.  The SpatialNavigation repository features more than a dozen unique example usages of the utility, from the most basic to very complex.  I encourage you to explore these demos to see all that SpatialNavigation has to offer.

尽管上面的演示相当简单，但我们知道动态应用程序并不简单。 SpatialNavigation存储库具有该实用程序的十几种独特示例用法，从最基本的到非常复杂的用法。 我鼓励您浏览这些演示以查看SpatialNavigation提供的所有内容。

[View Demo][] [观看演示][View Demo]

Spatial navigation can also play a role on desktop websites; many sites these days use a flexbox grid layout which could make great use directional arrows.  You'd need to be careful about CMD+up and CMD+down for full page scrolling, of course, but spatial navigation in that space would be useful.

空间导航也可以在桌面网站上发挥作用； 如今，许多站点都使用flexbox网格布局，可以很好地使用方向箭头。 当然，您需要小心CMD + up和CMD + down才能进行整页滚动，但是在该空间中进行空间导航会很有用。

> 翻译自: [https://davidwalsh.name/spatial-navigation][https_davidwalsh.name_spatial-navigation]

导航空间

[SpatialNavigation]: https://github.com/luke-chang/js-spatial-navigation/
[View Demo]: https://davidwalsh.name/demo/spatial-navigation.php
[https_davidwalsh.name_spatial-navigation]: https://davidwalsh.name/spatial-navigation