[Apache Shindig][お勉強][OpenSocial] メモ105 tabs(2) 削除

リファレンス見ればわかるんだけど、一応出力。

tabの削除をしてみた。
使用するのはこれ。

view plainprint?

1. gadgets.TabSet.prototype.removeTab = function(tabIndex) {  

gadgets.TabSet.prototype.removeTab = function(tabIndex) {

で、以下ガジェットXML。

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.       tabdayon.prototype.removeTab = function() { 
37.         var tab = this.tabs.getSelectedTab(); 
38.         var cont = tab.getContentContainer(); 
39.         this.tabs.removeTab(tab.getIndex()); 
40.         this.tabDivId[cont.id] = null; 
41.       }; 
42.       var tabInstance = null; 
43.       function init() { 
44.         tabInstance = new tabdayon(); 
45.         tabInstance.init(); 
46.         $('.addTab').click(function(ev) {tabInstance.addTab(ev);}); 
47.         $('.removeTab').click(function(ev) {tabInstance.removeTab();}); 
48.       } 
49.  
50.       gadgets.util.registerOnLoadHandler(init); 
51.     </script> 
52.     <form> 
53.       <input type="text" class="tabName" value=""> 
54.     </form> 
55.     <a href="#" class='addTab'>タブ追加だよ</a> 
56.     <a href="#" class='removeTab'>タブ削除だよ</a> 
57.     <div id="result"></div> 
58.     ]]>  
59.   </Content>  
60. </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 + 'を追加したよ';
      };
      tabdayon.prototype.removeTab = function() {
        var tab = this.tabs.getSelectedTab();
        var cont = tab.getContentContainer();
        this.tabs.removeTab(tab.getIndex());
        this.tabDivId[cont.id] = null;
      };
      var tabInstance = null;
      function init() {
        tabInstance = new tabdayon();
        tabInstance.init();
        $('.addTab').click(function(ev) {tabInstance.addTab(ev);});
        $('.removeTab').click(function(ev) {tabInstance.removeTab();});
      }

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

な感じ。

これでタブも削除できるようになった。

.