通过三星智能电视应用程序中的遥控器导航
Navigation through Remote in Samsung Smart Tv application
我正在创建一个三星智能电视javascript应用程序,HTML页面已完成,现在是时候在其中集成远程控制选项了。
我的应用程序包含不同 chanells 等的选项卡/图像,当用户通过远程选择时,他将被重定向到。现在的问题是这个导航将如何工作??用户如何使用遥控器在这些频道选项卡上左右或上下移动?
在三星智能电视文档中,他们提供了有关其密钥库的信息,但是如何在我的应用程序中使用它来移动到不同的元素?
不能给你一个完全有效的解决方案,但至少从我们如何做到这一点的一些实践中
。您可以将 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
}
}
相关文章:
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- 无法从jquery Mobile导航栏重定向到另一个页面
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 导航到特定事件的另一个变量页面
- MVC 3页面导航和使用javascript传递参数
- 如何在react js中从一个页面导航到另一个页面
- 导航栏没有调整到浏览器屏幕的大小
- 显示放大镜弹出窗口时隐藏导航内容
- DataTable按下键选择扩展/导航
- 正在检测导航到<a name=“;最新主题”></a>
- 带有url的单页网站导航
- 父页面的角度路由器导航高亮显示
- 如何正确编程jQuery动画与平滑(导航栏)
- 动态更改'汉堡包'导航取决于BG图像
- 使用导航属性创建Kendo UI网格模型的问题
- Flexslider导航按钮在悬停时不可见,带有橙色框
- 离开页面导航后保留文本区域内容
- 当主导航离开视图时,为粘性导航应用样式
- 通过三星智能电视应用程序中的遥控器导航