Google Gadgetにタブを追加してみる

Google GagetでAPIで取得したデータなどを表示するのはできましたが、
よくあるガジェットにはタブが採用されています。

このタブの仕組みがよくわからなかったのですが、
意外に結構シンプルな仕組みで実装できました。

tab.xml

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="タブサンプル" height="140" scrolling="true" > 
    <Require feature="tabs" /> 
  </ModulePrefs>
  <Content type="html">
  <![CDATA[ 

    <script type="text/javascript">
    var tabs = new gadgets.TabSet(__MODULE_ID__, "Two");
    function init() {

	tabs.addTab("1つ目", {
	   contentContainer: document.getElementById("one_id")
	});

        tabs.addTab("2つ目", {
           contentContainer: document.getElementById("two_id")
        });

    }

    gadgets.util.registerOnLoadHandler(init);
    </script>

   <div id="one_id" style="display:none">１つ目のタブの内容。</div>
   <div id="two_id" style="display:none">２つ目のタブの内容。</div>
  ]]>
  </Content>
</Module>

解説

1. の部分でタブを表示するのに必要なライブラリを読み込む。
2. gadgets.TabSet() コンストラクタ を使用して、tabs オブジェクトを作成。
3. addTab() 関数を使用して個々のタブを追加。タブの内容は、idをもとに
   要素の内容を追加する。

これでこんな感じでタブが作れます。