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

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

ソースは、

features/tabs/tabs.js

。

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

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

とのこと。

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

さっそくやってみる。

view plainprint?

1. <?xml version="1.0" encoding="UTF-8" ?>  
2. <Module>  
3.   <ModulePrefs title="tabsフィーチャー">  
4.     <Require feature="opensocial-0.8" />  
5.     <Require feature="tabs" />  
6.     <Require feature="setprefs" />  
7.     <Require feature="jquery" />  
8.   </ModulePrefs>  
9.   <Content type="html" view="home,profile,canvas">  
10.     <![CDATA[ 
11.     <script type="text/javascript"> 
12.       var tabdayon = function() { 
13.         this.tabs = null; 
14.         this.tabDivId = {}; 
15.       }; 
16.       tabdayon.prototype.init = function() { 
17.         this.tabs = new gadgets.TabSet(__MODULE_ID__, "タブセットだよーん"); 
18.         var oneId = this.tabs.addTab("One"); 
19.         this.tabDivId = {}; 
20.         this.tabDivId[oneId] = oneId; 
21.         var twoId = this.tabs.addTab("Two"); 
22.         this.tabDivId[twoId] = twoId; 
23.         document.getElementById(oneId).innerHTML = "最初のタブのコンテンツだよ"; 
24.         document.getElementById(twoId).innerHTML = "2番目のタブのコンテンツだよ"; 
25.       }; 
26.       /** 
27.        * タブの追加 
28.        */ 
29.       tabdayon.prototype.addTab = function(ev) { 
30.         var tabName = $('.tabName').val(); 
31.         $('.tabName').val(''); 
32.         var divId = this.tabs.addTab(tabName); 
33.         this.tabDivId[divId] = divId; 
34.         document.getElementById(divId).innerHTML = tabName + 'を追加したよ'; 
35.       }; 
36.       var tabInstance = null; 
37.       function init() { 
38.         tabInstance = new tabdayon(); 
39.         tabInstance.init(); 
40.         $('.addTab').click(function(ev) {tabInstance.addTab(ev);}); 
41.       } 
42.  
43.       gadgets.util.registerOnLoadHandler(init); 
44.     </script> 
45.     <form> 
46.       <input type="text" class="tabName" value=""> 
47.     </form> 
48.     <a href="#" class='addTab'>タブ追加だよ</a> 
49.     <div id="result"></div> 
50.     ]]>  
51.   </Content>  
52. </Module>  

<?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をインストールしただけでは使えない。


.