3

I am creating a samsung smart Tv javascript application, the HTML page is finished and now its time to integrate remote control options in it.

My application contains tabs/images for different chanells etc which when the user selects through remote, he will be redirected to. Now the the problem is that how this navigation will work?? how the user can go left right or up and down on these channel tabs using the remote control?

In the samsung smart tv documentation they have given info about their keys library but how can i use it in my application to move to different elements?

4

1 回答 1

4

不能给你一个完全有效的解决方案，但至少有一些我们如何做到这一点的做法。

您可以将 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
   }
}
于 2012-06-01T11:14:00.157 回答