[gadget]tabを作成する

今回、tabの仕様変更も入ってしまったので、ちょっと確認してみる。

ざっと作ってみた感じこのようになった。

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="test" directory_title="" title_url="" description="" author="maito.kuwahara" author_email="mai.musicfactory+gadgetfactory@gmail.com" author_affiliation="" author_location="japan" screenshot="" thumbnail="" height="200" author_photo="" author_aboutme="" author_link="http://temping-amagramer.blogspot.com/" author_quote="" > <Require feature="opensocial-0.8"/> <Require feature="dynamic-height"/> <!-- タブを追加することを宣言する --> <Require feature="tabs"/> </ModulePrefs> <!-- 最後に選択されたタブはどこか情報を格納しておく変数 --> <UserPref name="selectedTab" datatype="hidden"/> <!-- home view --> <Content type="html" view="home"> <![CDATA[ <script type="text/javascript"> //tabオブジェクトを新規に作成 var tabs = new gadgets.TabSet(__MODULE_ID__); //tabオブジェクトにtabを追加する(tabの名前はone) var one_id = tabs.addTab("One"); //tabオブジェクトにtabを追加する(tabの名前はtwo) var two_id = tabs.addTab("two"); //作成したoneタブにコンテンツを追加する document.getElementById(one_id).innerHTML = "Content for tab One."; //作成したtwoタブにコンテンツを追加する document.getElementById(two_id).innerHTML = "Content for tab two."; //gadgets.window.adjustHeight(); </script> ]]> </Content> <!-- canvas view --> <Content type="html" view="canvas"> <![CDATA[ canvas viewです。 <script type="text/javascript"> gadgets.window.adjustHeight(); </script> ]]> </Content> <!-- home、canvas viewに対応していない場合 --> <Content type="html"> <![CDATA[ <script type="text/javascript"> //tabオブジェクトを新規に作成 var tabs = new _IG_Tabs(__MODULE_ID__); //tabオブジェクトにtabを追加する(tabの名前はone) var one_id = tabs.addTab("One"); //tabオブジェクトにtabを追加する(tabの名前はtwo) var two_id = tabs.addTab("two"); //作成したoneタブにコンテンツを追加する document.getElementById(one_id).innerHTML = "Content for tab One."; //作成したtwoタブにコンテンツを追加する document.getElementById(two_id).innerHTML = "Content for tab two."; //_IG_AdjustIFrameHeight(); </script> ]]> </Content> </Module>

まず最初に、Requireタグのfeature="tabs"が必要。

次に、最後に選択されたタブの情報を残しておくのに、UserPrefタグを追加しました。

で、実際の作り方ですが、new gadgets.TabSet(__MODULE_ID__)で新規にオブジェクトを作ります。

これだけだと、ただオブジェクトを作っただけで、タブは表示されません。

表示するには、addTabメソッドを使って追加していきます。
addTabメソッドの引数の数は、いくつかありますが、最初の引数はtabの名前です。

返り値が、どうやら、htmlのid属性に相当するものなので、document.getElementByIdを使ってコンテンツをセットします。

ここまでで重要なことは、open socialバージョンのiGoogleと非対応のiGoogleガジェットでは、オブジェクトの作成方法が若干違うところ。

非対応の場合だと、new _IG_Tabs(__MODULE_ID__)と書かなくちゃーいけないんですね。

最後に上のソースの実行結果を、載せておきます。





昔のgadgetの仕様書では、一つ一つ画像がついていて、すっげーわかりやすかったのですが、最近の仕様書は、めっきり画像がなくなってしまい、直感的にわからなくなってきたなー。

ちょっとこの点について不親切かなと思います。