読者です 読者をやめる 読者になる 読者になる

cutmail's blog

write the code

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">1つ目のタブの内容。</div>
   <div id="two_id" style="display:none">2つ目のタブの内容。</div>
  ]]>
  </Content>
</Module>

解説

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

これでこんな感じでタブが作れます。
f:id:invent:20081213233205p:image