[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(atabId){ alert(atabId); } </script> ]]> </Content> </Module>

前回と違うのは、lf_selectedに引数を追加したこと。

これによって、実は、選択されたタブをidを返してくれるんですねー。

なんと便利な。

実行結果は、このような感じになります。


上は大正を選んだ時の模様

実は、各タブはindexも保持しており、indexで取得したい場合は、このような感じになります。

<?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"> var tabs = new gadgets.TabSet(__MODULE_ID__); gadgets.util.registerOnLoadHandler(lf_init); function lf_init(){ 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(){ var selectedtabindex = tabs.getSelectedTab(); selectedtabindex = selectedtabindex.getIndex(); alert(selectedtabindex); } </script> ]]> </Content> </Module>

実行結果はこのようになります。


画像は昭和を選択したときのもの。

getSelectedTab()メソッドによって、一度、gadgets.Tabオブジェクトを取得し、またgetIndex()によって、indexを取得しています。

各indexはaddTabで設定できるのですが、設定しなかった場合は、1つづ値が増えていきます。

最初は0からスタートです。
(なので、明治を選んだ場合は0と表示されます。)

これでindexとidによる取得と両方に対応できるようになりました。

次回は、選択したタブを保持する方法について。