javascript-在Samsung Smart TV应用程序中通过遥控器导航

我正在创建一个三星智能电视javascript应用程序,HTML页面已完成,现在是时候在其中集成远程控制选项了.

我的应用程序包含用于不同频道的标签/图像等,当用户通过遥控器进行选择时,会将其重定向到.现在的问题是这种导航将如何工作？用户如何使用遥控器在这些频道选项卡上向左或向右或向下移动？

在三星智能电视文档中,他们提供了有关密钥库的信息,但是我如何在应用程序中使用它来移动到其他元素？

解决方法:

无法为您提供完整的解决方案,但至少提供了一些我们如何做到这一点的实践.

您可以将HTML组织到不同的导航区域和类型中.导航区具有导航类型,通常是列表或网格.

JavaScript导航控制器跟踪您所在的区域.它还处理按键(上/下/左/右/输入),并根据导航类型确定要突出显示的下一项.

假设您有一个标签列表：

<div id="maintabs" class="tabs nav-current-zone" data-nav-type="list">
    <span class="tab nav-current-item">Tab 1</span>
    <span class="tab">Tab 2</span>
    <span class="tab">Tab 3</span>
</div>

JavaScript通常看起来像这样：

if($(".nav-current-zone").data("nav-type") === "list"){
    if(key === "down"){
       var currentItem = $(currentZone).find("nav-current-item");
       var nextItem =  $(currentItem).next();
       $(currentItem).removeClass("nav-current-item");
       $(nextItem).addClass("nav-current-item");
    } else if(key === "up"){
    ...
}

如果您位于列表的顶部/底部并且导航到列表之外怎么办？在这种情况下,您什么都不做,或者定义另一个要输入的区域.

<div id="maintabs" data-nav-type="list" data-nav-leave-down="anotherZone">
    ...
</div>

<div id="anotherZone" data-nav-type="list" data-nav-leave-up="maintabs">
    ...
</div>

因此,让我们处理一下：

if(key === "down"){
   var nextItem =  $(currentZone).find("nav-current").next();
   if($(next).size() === 0){
        var nextZone = $(currentZone).data("nav-leave-down");
        //navigate to the other zone
   }
}