4

我有一个项目涉及使用 Google TV UI Closure 库进行键盘/d-pad 导航。我正在使用从 Google 的 appspot tvui 演示中复制的代码用于 tv-tab-container

<div class="tv-tab-container tv-container-vertical">
  <div class="tv-tab-container-bar tv-container-horizontal">
    // Tab bar components.
  </div>
  <div class="tv-tab-container-content tv-container-horizontal">
    // Content components.
  </div>
</div>

我的印象是闭包库会处理更改选项卡的内容，但事实并非如此。有人知道制作标签功能所需的Javascript吗？我不太了解闭包库的事件处理与 tv-tab-container-bar 选项卡。

4

4 回答 4

2

tvuidemos.appspot.com/ 上的标签容器演示运行良好。首先，您的 HTML 需要使用内容组件进行如下增强：

选项卡 1 选项卡 2 选项卡 3 选项卡 4 内容 1 内容 2 内容 3 内容 4

其次，您可能需要包含更多的 js 文件，而不仅仅是 tab_container.js。此链接列出了您可能需要的依赖项：

http://tvuidemos.appspot.com/static/tv-ui/deps.js

如果您有一个公共 URL 可以共享您的选项卡容器示例，则可能更容易查明问题所在。

于 2013-01-03T19:15:45.180 回答
1

您的问题中没有足够的细节来允许任何合理的答案。请使用更多详细信息和代码以及您要实现的目标来修改您的问题。

编辑 1：同样，您所问的问题中没有任何信息。您的问题是“为什么我的代码不起作用”，但您没有提供对代码的访问权限。诸如“它看起来正确，但它不起作用”之类的陈述并没有让您深入了解为什么您无法让您的代码工作。我的建议是：将您的代码发布到 github 之类的地方并提供一个链接（所有相关文件以重现您的问题），或者将您的代码托管在某个处于运行状态的地方，以便可以在 Google TV 上查看。

于 2013-01-01T03:05:19.550 回答
0

此演示中的选项卡容器：http ://tvuidemos.appspot.com/#如下所示。

<div class="tv-tab-container tv-container-vertical"> <div class="tv-tab-container-bar tv-container-horizo​​ntal demo-tab-bar"> <div class="demo-tab tv -component">标签1</div>< div class="demo-tab tv-component">标签2</div><div class="demo-tab tv-component">标签3</div>< div class="demo-tab tv-component">tab 4</div> </div> < div class="tv-tab-container-content tv-tab-container-focus-attractor tv-container-horizo​​ntal demo-tab -content-container"> <div class="tab-demo-content tv-component">内容1</div> ...
< /div> </div>

</div> </div>

请注意 tv-tab-container 需要在那里，因为它在http://tvuidemos.appspot.com/static/tv-ui/tab_container.js文件中使用。

于 2013-01-07T22:38:11.580 回答
0

好吧，在这一切之后，当专注于 tv-tab-container 时，我最终只为键盘左右编写了自己的事件侦听器，并使用 setFocusedComponent() 通过使用动态创建的 div id 来相应地更改选项卡内容。我仍然不完全确定为什么除了 tv-tab-container 之外的所有其他 tv-ui 组件都对我有用，但这模仿了我所追求的相同行为

function updateTabContent(content, tab)
{
//sets the correct tab and content to be focused and visible
var allContentDivs = $('.tab-demo-content').hide();
var contentToShow = $('#'+content);
contentToShow.show();

var elementToFocus = goog.dom.getElement(content);
var componentToFocus = tv.ui.getComponentByElement(elementToFocus);
tv.ui.Document.getInstance().setFocusedComponent(componentToFocus);

elementToFocus = goog.dom.getElement('tab' + tab);
componentToFocus = tv.ui.getComponentByElement(elementToFocus);
tv.ui.Document.getInstance().setFocusedComponent(componentToFocus)

}
于 2013-01-08T19:40:24.370 回答