ドキュメント

タブを表示する

一つのアプリケーションで複数のコンテンツを表示させたい場合、タブを利用してコンテンツを切り替えることが有効です。 OpenSocial ではタブを簡単に利用するための機能を提供しています。ソーシャルアプリでもこの機能を利用することができます。

OpenSocial 1.0 で規定されている仕様については下記をご覧ください。

http://opensocial-resources.googlecode.com/svn/spec/1.0/Core-Gadget.xml#gadgets.TabSet

タブ機能の利用宣言

OpenSocial で提供しているタブ機能を利用するためには、以下のようにガジェットXMLを記述して tabs フィーチャーを有効にする必要があります。

<Module ...>
  <ModulePrefs>
    <Require feature="tabs" />
     ...
  </ModulePrefs>
...
</Module>

タブの表示

まず、タブ機能を使って表示するコンテンツを、DOM要素として作成しておきます。 静的に HTML を配置しても、JavaScript で動的に作成してもどちらでも構いません。

<div id="tabs"></div>
<div id="tab1">This is tab1.</div>
<div id="tab2">This is tab2.</div>
  • タブを配置するためのdiv要素を1つ用意します。
  • 各タブの内容となるdiv要素を1つ以上用意します。

次に以下のようにタブを表示するためのプログラムを用意します。

var tabs = new gadgets.TabSet(__MODULE_ID__, null, document.getElementById("tabs"));

var tab1 = {
  contentContainer: document.getElementById("tab1"),
  callback: function() {
    // ...
  }
};
tabs.addTab("タブ1", tab1);

var tab2 = {
  contentContainer: document.getElementById("tab2"),
  callback: function() {
    // ...
  }
};
tabs.addTab("タブ2", tab2);
  • gadgets.TabSet コンストラクタの第三引数にタブを配置する位置となるDOM要素を指定します。
  • gadgets.TabSet.addTabs() メソッドで、追加したいタブを指定します。
  • タブが選択された場合に、該当するタブのコールバック関数が呼び出されます。