[gadget]タブ選択時に関数をコール

タブが選択された場合に関数をコールする方法はこんな感じになります。

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Test" directory_title="" title_url="http://widgmedia.com/" description="" author="maito.kuwahara" author_location="Japan" author_affiliation="" author_email="mai.musicfactory+gadgetfactory@gmail.com" author_link="http://temping-amagramer.blogspot.com/" screenshot="" thumbnail="" author_photo="http://widgmedia.com/gadget/my_profile_photo.png" height="350" > <Require feature="tabs" /> </ModulePrefs> <Content type="html"> <![CDATA[ <style type="text/css"> </style> <div id="id_meiji" style="display:none;"></div> <div id="id_taisho" style="display:none;"></div> <div id="id_showa" style="display:none;"></div> <div id="id_heisei" style="display:none;"></div> <script type="text/javascript"> gadgets.util.registerOnLoadHandler(lf_init); function lf_init(){ var tabs = new gadgets.TabSet(__MODULE_ID__); tabs.addTab("明治","id_meiji",lf_selected); tabs.addTab("大正","id_taisho",lf_selected); tabs.addTab("昭和","id_showa",lf_selected); tabs.addTab("平成","id_heisei",lf_selected); } function lf_selected(){ alert("選択されました"); } </script> ]]> </Content> </Module>

実際タブが選択されたときに呼び出される関数は、addTabメソッドの第三引数で設定します。

実行結果はこのような形になりました。


だいぶ前に、書いたタブの作成方法とは若干違うところがあり、addTabメソッドの第二引数が追加されているところ。

これは何かというと、divタグのid属性を指定すれば、そこにタブを生成しますよぉーというもの。

ただし、こちらのリファレンスにもあるようにstyle="display:none;"といちおう書いておきました。

もちろん各addTabメソッドにおいて、別々のファンクションを設定することも可能です。

これでタブが選択された場合の処理も書くことができます。