jQuery-uiのtabsで入れ子のタブを作る - モーグルとカバとパウダーの日記

jQuery-uiのtabsでタブを書いてたんですが、その中にさらに入れ子でタブを作る必要があり、その時のメモ。
需要ありそうなのに紹介されてる例が見つけられなかったので。

普通jQuery-uiのtabsはこんな感じに書きます。

<!doctype html>
<html>
<head>
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
  $( "#tabs" ).tabs();
});
</script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">tab1</a></li>
    <li><a href="#tabs-2">tab2</a></li>
    <li><a href="#tabs-3">tab3</a></li>
  </ul>

  <div id="tabs-1">
  <p>This is tab1</p>
  </div>

  <div id="tabs-2">
  <p>This is tab2</p>
  </div>

  <div id="tabs-3">
  <p>This is tab2</p>
  </div>

</div>

</body>
</html>

最初は独立してタブ部分だけを２つ作り、そこから対応するタブの中身を表示させようかと思ったのですが、それだとjavascript書かないといけないので、ほんとにタブの中にタブ書いてみました。

タブの中のタブがちゃんと表示されるかしらと不安だったのですが、ちゃんと動きました。

<script>
$(function() {
  $( "#tabs" ).tabs();
  $( "#tabs-1" ).tabs();
  $( "#tabs-2" ).tabs();
});
</script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">tab1</a></li>
    <li><a href="#tabs-2">tab2</a></li>
  </ul>

  <div id="tabs-1">
    <ul>
      <li><a href="#tabs-1a">aaa</a></li>
      <li><a href="#tabs-1b">bbb</a></li>
    </ul>

    <div id="tabs-1a">
    <p>This is tab1a</p>
    </div>

    <div id="tabs-1b">
    <p>This is tab1b</p>
    </div>

  </div>

  <div id="tabs-2">
    <ul>
      <li><a href="#tabs-2a">aaa</a></li>
      <li><a href="#tabs-2b">bbb</a></li>
    </ul>

    <div id="tabs-2a">
    <p>This is tab2a</p>
    </div>

    <div id="tabs-2b">
    <p>This is tab2b</p>
    </div>

  </div>

</div>

Webアプリで使いたかったので、同様の構造を吐き出させて使いました。

ちなみに最初に選択してあるタブを指定させるには、下記のようにタブを初期化するjavascript内で指定させます。
タブの並び順を0オリジンで指定。
インナーのタブ毎にもちゃんと指定出来ます。

$(function() {
  $( "#tabs" ).tabs({ active: 1 });
  $( "#tabs-1" ).tabs({ active: 0 });
  $( "#tabs-2" ).tabs({ active: 1 });
});