■ タブ付きガジェットです。
■ ガジェットが縦長になるのを避けたい時には活用したい方法です。
■ Googleでは４通りのタブ利用の方法を示しています。詳しくはこちら "
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の引数で２つ目のタブの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">２つ目のタブの内容</div>
<div id="three_id" style="display:none">３つ目のタブの内容</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>
