Question

我有一个涉及使用Google TV UI Closure库进行键盘/ d-pad导航的项目。我正在使用googles appspot tvui demos中复制的代码来获取电视标签容器

<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选项卡处理关闭库的事件处理

Answer 1

tvuidemos.appspot.com/上的标签容器演示效果很好。首先，您的HTML需要像内容组件一样进行增强：

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

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

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

如果您要为标签容器示例共享公共网址，则可能更容易查明问题所在。

Answer 2

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

编辑1：同样，您要问的问题中没有任何信息。您的问题是“为什么我的代码无效”，但您没有提供对代码的访问权限。诸如“它看起来正确但功能不正常”之类的声明并未提供有关您无法使代码工作的原因。我的建议是这样的：在github之类的地方发布你的代码并提供一个链接（所有相关文件来重现你的问题），或者在运行状态下托管代码，以便在Google TV上查看。

Answer 3

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

＆LT; div class =“tv-tab-container tv-container-vertical”＆gt; ＆LT; div class =“tv-tab-container-bar tv-container-horizontal demo-tab-bar”＆gt; ＆LT; div class =“demo-tab tv-component”＆gt; tab 1＆lt; / DIV＆GT;＆LT; div class =“demo-tab tv-component”＆gt; tab 2＆lt; / div＆gt;＆lt; div class =“demo-tab tv-component”＆gt; tab 3＆lt; / DIV＆GT;＆LT; div class =“demo-tab tv-component”＆gt; tab 4＆lt; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; div class =“tv-tab-container-content tv-tab-container-focus-attractor tv-container-horizontal demo-tab-content-container”＆gt; ＆LT; div class =“tab-demo-content tv-component”＆gt; content 1＆lt; / DIV＆GT; ...
＆LT; / DIV＆GT; ＆LT; / DIV＆GT;

＆LT; / DIV＆GT; ＆LT; / DIV＆GT;

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

Answer 4

好了，毕竟我最后只是在关注tv-tab-container时左右键盘自己的事件监听器，并使用setFocusedComponent（）通过动态创建的div id相应地更改tab-content。。我还不完全确定为什么每个其他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)

}

tv-tab-container js用于具有Closure库的工作选项卡

4 个答案: