4

キーボード/十字キーのナビゲーションにGoogleTVUIClosureライブラリを使用するプロジェクトがあります。tv-tab-container用にGoogleのappspottvuiデモから直接コピーしたコードを使用しています

<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

次に、tab_container.jsだけでなく多くのjsファイルを含める必要がある場合があります。このリンクには、必要になる可能性のある依存関係がリストされています。

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

タブコンテナのサンプルで共有するパブリックURLがある場合は、問題が何であるかを特定する方が簡単な場合があります。

于 2013-01-03T19:15:45.180 に答える
1

あなたの質問には、合理的な答えを出すのに十分な詳細がありません。達成しようとしていることとともに、より詳細なコードで質問を修正してください。

編集1：繰り返しますが、あなたが尋ねている質問には情報がありません。あなたの質問は「なぜ私のコードが機能しないのか」ですが、あなたはあなたのコードへのアクセスを提供していません。「見た目は正しいが機能していない」などのステートメントは、コードを機能させることができない理由についての洞察を追加しません。私の提案はこれです：githubのような場所にコードを投稿し、リンク（問題を再現するためのすべての関連ファイル）を提供するか、GoogleTVで見ることができるように実行状態のどこかにコードをホストします。

于 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 "> tab 1 </ div> <div class =" demo-tab tv-component "> tab 2 </ div> <div class =" demo-tab tv-component "> tab 3 </ div> <div class ="demo-tabtv-component">タブ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-contenttv-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（）を使用して、動的に作成されたdividを使用してタブコンテンツを変更しました。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 に答える