[Apache Shindig][お勉強][OpenSocial] メモ104 tabs(1)

フィーチャーのtabsを見ていく。

ソースは、

features/tabs/tabs.js

。

で、これは何かというと、、

ガジェットにタブ付きのユーザー インターフェースを追加できます。

とのこと。

ほほう。
通常は、setprefsフィーチャーと一緒に使うのだそうだ。

さっそくやってみる。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="tabsフィーチャー">
    <Require feature="opensocial-0.8" />
    <Require feature="tabs" />
    <Require feature="setprefs" />
    <Require feature="jquery" />
  </ModulePrefs>
  <Content type="html" view="home,profile,canvas">
    <![CDATA[
    <script type="text/javascript">
      var tabdayon = function() {
        this.tabs = null;
        this.tabDivId = {};
      };
      tabdayon.prototype.init = function() {
        this.tabs = new gadgets.TabSet(__MODULE_ID__, "タブセットだよーん");
        var oneId = this.tabs.addTab("One");
        this.tabDivId = {};
        this.tabDivId[oneId] = oneId;
        var twoId = this.tabs.addTab("Two");
        this.tabDivId[twoId] = twoId;
        document.getElementById(oneId).innerHTML = "最初のタブのコンテンツだよ";
        document.getElementById(twoId).innerHTML = "2番目のタブのコンテンツだよ";
      };
      /**
       * タブの追加
       */
      tabdayon.prototype.addTab = function(ev) {
        var tabName = $('.tabName').val();
        $('.tabName').val('');
        var divId = this.tabs.addTab(tabName);
        this.tabDivId[divId] = divId;
        document.getElementById(divId).innerHTML = tabName + 'を追加したよ';
      };
      var tabInstance = null;
      function init() {
        tabInstance = new tabdayon();
        tabInstance.init();
        $('.addTab').click(function(ev) {tabInstance.addTab(ev);});
      }

      gadgets.util.registerOnLoadHandler(init);
    </script>
    <form>
      <input type="text" class="tabName" value="">
    </form>
    <a href="#" class='addTab'>タブ追加だよ</a>
    <div id="result"></div>
    ]]>
  </Content>
</Module>

ってな感じ。

最初に表示させたときは感動した。。

さらにいろいろできるみたい。
詳細は、http://code.google.com/intl/ja/apis/gadgets/docs/ui.html#Tabs
を見ればよくわかると。

ちなみに<Require feature="jquery" />はgooホームでは使えるようだけど、
shindigをインストールしただけでは使えない。


.