このガジェットでエラーが発生しました

2011年3月21日月曜日

iGoogle Gadget -17

■ タブ付きガジェットです。

■ ガジェットが縦長になるのを避けたい時には活用したい方法です。

■ Googleでは4通りのタブ利用の方法を示しています。詳しくはこちら "Googleを追いかけろ"で。

■ 下はこのページ上部のラジオリンクガジェットに利用したファイルの一部です。




<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Tabs Demo" height="140" scrolling="true" >
    <Require feature="tabs" />
  </ModulePrefs>
  <Content type="html">
  <![CDATA[

    <script type="text/javascript">
    var tabs = new gadgets.TabSet(__MODULE_ID__, "one_id");
    function init() {
        var one_Id = tabs.addTab('<div style="color: red; font-weight: bold; background-color:#ccf;">Jazz</div>');//タブ名設定
        document.getElementById(one_Id).innerHTML = "タブの追加時にタブ名を設定します";
//タブ内のコンテンツ

        tabs.addTab("Classical", { //addTabの引数で2つ目のタブのIDを作成
           contentContainer: document.getElementById("two_id")
        });

        tabs.addTab("Rock", {   //コールバックを利用
           contentContainer: document.getElementById("three_id"),
           callback: callback,
           tooltip: "ツールチップも作れます"          //ツールチップの作成
        });

        tabs.addTab("Others", {          
           contentContainer: document.getElementById("four_id"),
           callback: callback,          
           tooltip: "I'm special"          //ツールチップの作成
        });
    }

    function callback(tabId) {     //three,four用callback
      var p = document.createElement("p");
      var selectedTab = tabs.getSelectedTab();
      p.innerHTML = "RockとOthersタブ用にコールバックを利用して動的コンテンツを作成しています " + selectedTab.getName();
      document.getElementById(tabId).appendChild(p);
    }

    gadgets.util.registerOnLoadHandler(init);
    </script>

   <div id="two_id" style="display:none">2つ目のタブの内容</div>
   <div id="three_id" style="display:none">3つ目のタブの内容</div>
  ]]>
  </Content>
</Module>


■ 下は実際に使用しているファイルです。




<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="世界のインターネットラジオを聴こう/mini" title_url="http://www.radio-oh.com/" height="125" scrolling="true" >
    <Require feature="tabs" />
  </ModulePrefs>
  <Content type="html">
  <![CDATA[

    <script type="text/javascript">
    var tabs = new gadgets.TabSet(__MODULE_ID__, "Jazz");
    function init() {

        tabs.addTab("Classical", {
           contentContainer: document.getElementById("Classical"),
           tooltip: "I'm Classical!"
        });

        tabs.addTab("Jazz", {
           contentContainer: document.getElementById("Jazz"),
           tooltip: "I'm Jazz!"
        });

        tabs.addTab("Rock", {
           contentContainer: document.getElementById("Rock"),
           tooltip: "I'm Rock!"
        });

        tabs.addTab("Others", {          
           contentContainer: document.getElementById("four_id"),
           callback: callback,          
           tooltip: "I'm Others!"      
        });
    }


    function callback(tabId) {
      var p = document.createElement("p");
      var selectedTab = tabs.getSelectedTab();
      p.innerHTML = ""
      document.getElementById(tabId).appendChild(p);
    }

    gadgets.util.registerOnLoadHandler(init);
    </script>

<div id="Classical" style="display:none">
   <div style="text-align:center;font-size:11;background-image: url('http://www5d.biglobe.ne.jp/~pog/img/classical.gif');height:95;">
      <br /><b>listen
      <a href="http://www.classical102.com/listen.pls"><font color='green'>".pls"</font></a> -
      <a href="http://www.classical102.com/listen.asx"><font color='green'>".asx"</font></a> -
      <a href="http://www.classical102.com//listen.ram"><font color='green'>".ram"</font></a> -
      <a href="http://www.classical102.com/" target="_blank"><font color='green'>home</font></a>
      </b><br />
      <font color="green">      ======================================</font>
      <br /> <b> - Classical 102 - </b> Grolmanstr. Berlin, Germany
      <br /> THE First CLASS IN MUSIC.
      <br /><font color="green">      ======================================</font>
   </div>
</div>

<div id="Jazz" style="display:none">
   <div style="text-align:center;font-size:11;background-image: url('http://www5d.biglobe.ne.jp/~pog/img/jazz.gif');height:95;">
      <br /><b>
      <a href="http://den-a.plr.liquidcompass.net/pls/KSDSFMMP3.pls"><font color='purple'>"listen KSDSFMMP3.pls 128k"</font></a> -
      <a href="http://www.jazz88online.org/" target="_blank"><font color='purple'>home</font></a>
      </b><br />
      <font color="purple">      ======================================</font>
      <br /> <b> - KSDS - </b> San Diego City College
      <br /> Your Connection to the Artists in San Diego.
      <br /><font color="purple">      ======================================</font>
   </div>
</div>

<div id="Rock" style="display:none">
   <div style="text-align:center;font-size:11;background-image: url('http://www5d.biglobe.ne.jp/~pog/img/rock.gif');height:95;">
      <br /><b>listen
      <a href="http://freebird.gotdns.com:8000/listen.pls"><font color='red'>".pls"</font></a> -
      <a href="http://www.freebirdradio.com/hiro/station3.pls"><font color='red'>".pls"</font></a> -
      <a href="http://www.freebirdradio.com/hiro/station2.asx"><font color='red'>".asx"</font></a> -
      <a href="http://www.freebirdradio.com/hiro/station2.ram"><font color='red'>".ram"</font></a> -
      <a href="http://www.freebirdradio.com/" target="_blank"><font color='red'>home</font></a>
      </b><br />
      <font color="red">      ======================================</font>
      <br /> <b> - Freebird Radio - </b> Tokyo Japan
      <br /> Serving you the Best Classic Rock 24 hours a day!.
      <br /><font color="red">      ======================================</font>
   </div>
</div>

</div>

<div id="four_id" style="display:none">
   <div style="text-align:center;font-size:11;background-image: url('http://www5d.biglobe.ne.jp/~pog/img/others.gif');height:95;">
      <br /><b>listen
      <a href="http://listen.housetime.fm/dsl.pls"><font color='brown'>".pls"</font></a> -
      <a href="http://listen.housetime.fm/dsl.asx"><font color='brown'>".asx"</font></a> -
      <a href="http://listen.housetime.fm/dsl.ram"><font color='brown'>".ram"</font></a> -
      <a href="http://www.housetime.fm/" target="_blank"><font color='brown'>home</font></a>
      </b><br />
      <font color="brown">      ======================================</font>
      <br /> <b> - HouseTime.FM - </b> rare core
      <br /> Playlist mit Mixed Style.
      <br /><font color="brown">      ======================================</font>
   </div>
</div>

  ]]>
  </Content>
</Module>