3

私は samsung smart Tv javascript アプリケーションを作成しています。HTML ページが完成し、リモート コントロール オプションを統合する時が来ました。

私のアプリケーションには、さまざまなチャネルなどのタブ/画像が含まれており、ユーザーがリモートで選択するとリダイレクトされます。問題は、このナビゲーションがどのように機能するかということです?? ユーザーがリモコンを使用してこれらのチャネル タブを左右または上下に移動するにはどうすればよいですか?

samsung smart tvのドキュメントでは、キーライブラリに関する情報を提供していますが、アプリケーションでそれを使用して別の要素に移動するにはどうすればよいですか?

4

1 に答える 1

4

完全に機能するソリューションを提供することはできませんが、少なくとも私たちがこれを行った方法からいくつかのプラクティスを提供します。

HTML をさまざまなナビゲーション ゾーンとタイプに編成できます。ナビゲーション ゾーンにはナビゲーション タイプ (通常はlistまたはgrid ) があります。

JavaScript ナビゲーション コントローラーは、現在のゾーンを追跡します。また、キープレス (上/下/左/右/Enter) を処理し、ナビゲーションの種類に基づいて次に強調表示するアイテムを把握します。

タブのリストがあるとしましょう:

<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 に答える