opensocial-jqueryでのタブ

gadget.xml

<div id="tabs">
	<ul>
		<li><a href="#tab1">タブ１</a></li>
		<li><a href="#tab2" >タブ２</a></li>
	</ul>
	<div id="tab1">タブ１のコンテンツ</div>
2のコンテンツ</div>
</div>
<script type="text/javascript">
$("#tabs").tabs();
</script>

opensocial-jquery.js

  /**
   * Tabs
   */

  $.fn.tabs = function(fn) {
    return this.each(function() {
      var tabset = new gadgets.TabSet(null, null, this);
      tabset.alignTabs('left');
      $('ul', this)
        .find('li a')
        .each(function(i) {
          var content = $('#' + this.href.split('#')[1]).get(0);
          tabset.addTab($(this).html(), {
            tooltip: this.title,
            contentContainer: content,
            callback: function () {
              if (fn) fn.apply(content, [i, content]);
            }
          });
        })
      .end()
      .remove();
    });
  };

• gadgets.TabSetコンストラクタの第３引数は、タブを配置する位置となるDOM要素。
• addTab()の第一引数はタブの表示名
• addTab()の第２引数は規定のオブジェクト。
  • contentContainer:タブの内容
  • callback:タブが選択された際のコールバック関数
  • tooltip:タブのツールチップ

コールバック関数にはeachのインデックスを渡してるので、タブ番号に応じた制御ができる。

あわせて読みたい

Tabs - opensocial-jquery - タブを表示し、タブの切り替えイベントをハンドリングできます。 - Project Hosting on Google Code
mixi Developer Center (ミクシィ デベロッパーセンター) » タブを使ってみよう