在三星智能电视应用程序中通过遥控器导航答案

【问题标题】：Navigation through Remote in Samsung Smart Tv application在三星智能电视应用程序中通过遥控器导航
【发布时间】：2012-06-01 19:19:48
【问题描述】：

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

我的应用程序包含不同频道等的选项卡/图像，当用户通过远程选择时，他将被重定向到。现在的问题是这个导航将如何工作？用户如何使用遥控器在这些频道选项卡上左右上下移动？

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

【问题讨论】：

您需要自己处理密钥。三星指南为您提供按键列表，因此您将知道按下遥控器上的哪个按钮，因为它们返回的键码与普通键盘不同。看看@IntoTheVoid 解决方案。

标签： javascript jquery html samsung-smart-tv

【解决方案1】：

无法为您提供一个完全可行的解决方案，但至少可以从我们的做法中获得一些实践。

您可以将 HTML 组织成不同的导航区域和类型。导航区域具有导航类型，通常是 list 或 grid。

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

【讨论】：