导航空间_空间导航

最新推荐文章于 2024-05-08 09:36:17 发布

cuozhun3051

最新推荐文章于 2024-05-08 09:36:17 发布

阅读量900

点赞数

文章标签：动态规划微软隐马尔可夫模型数据结构定位

原文链接：https://davidwalsh.name/spatial-navigation

版权

导航空间

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，以轻松，灵活地实现JavaScript导航！

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


<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;
}

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 观看演示

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才能进行整页滚动，但是在该空间中进行空间导航会很有用。