jQuery UI Tabs 縦(垂直)タブを作成する

投稿日:

jQuery UI の Tabs は通常 横(水平)方向に作成されますが、縦(垂直)方向のタブを作成したくなりGoogleで調べました。
サンプルを元に作ってみるも、とりあえずミニマムでは動作するが、ちょっと凝った事をしようとするとダメだったのでカスタマイズしたメモです。

水平Tab

jQuery UI 公式サイト のサンプル通りですね。

<script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
</script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">panel 1</a></li>
    <li><a href="#tabs-2">panel 2</a></li>
    <li><a href="#tabs-3">panel 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>simple</p>
  </div>
  <div id="tabs-2">
    <p>text only</p>
  </div>
  <div id="tabs-3">
    <p>panel 3</p>
  </div>
</div>

GitHub Pages:サンプル simple.html

垂直Tab

Googleで調べたらいくつか見つかりました。

jQuery UI の Tabs で作る縦並びのタブ型メニュー
http://alphasis.info/2013/04/jquery-ui-tabs-vertical/

jQuery UI Vertical Tabs - JSFiddle
http://jsfiddle.net/tj_vantoll/nn2Qw/?fbclid=IwAR3gYzWXAjzV5poGQdwxd2WEYEARQAvyBXHJfkFM35W6NouIIumadwN53DU

ui-tabs-vertical クラスのCSSを定義し、tabs指定時にクラスを設定する方式です。

.ui-tabs-vertical {
    width: 55em;
}

.ui-tabs-vertical .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left; width: 12em;
}

.ui-tabs-vertical .ui-tabs-nav li {
    clear: left; width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px 0.2em 0;
}

.ui-tabs-vertical .ui-tabs-nav li a {
    display:block;
    width: 10em;
}

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0;
    padding-right: .1em;
    border-right-width: 1px;
    border-right-width: 1px;
}

.ui-tabs-vertical .ui-tabs-panel {
    padding: 1em;
    float: right;
    width: 35em;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0.2em;
}
<script>
  $( function() {
    $("#tabs")
        .tabs()
        .addClass("ui-tabs-vertical ui-helper-clearfix")
        .find("li")
          .removeClass("ui-corner-top")
          .addClass("ui-corner-left");
  } );
</script>

GitHub Pages:サンプル vertical.html

しかし少し不具合があります。

どんな不具合があるかと言うとタブを多重化・多層化した際に、子孫まで影響し垂直タブの中に水平タブを設置しようとしても、必ず垂直タブになってしまいます。

ダメなケース 垂直タブの中に水平タブを設置する
GitHub Pages:サンプル vertical-tab-multiplexing-bad-case.html

垂直Tab 修正版

jQueryのセレクターでは、findを使用し子孫まで指定しているため、childrenを使用し、子供に限定します。

<script>
  $( function() {

    $("#tabs")
        .tabs()
        .addClass("ui-tabs-vertical ui-helper-clearfix")
        .children("ul > li") // .find("li")
          .removeClass("ui-corner-top")
          .addClass("ui-corner-left");
  } );
</script>

次に CSS も 影響範囲を限定していきます。

.ui-tabs-vertical {
    width: 55em;
}

/* .ui-tabs-vertical .ui-tabs-nav { */
.ui-tabs-vertical > .ui-tabs-nav { 
    padding: .2em .1em .2em .2em;
    float: left; width: 12em;
}

/* .ui-tabs-vertical .ui-tabs-nav li { */
.ui-tabs-vertical > .ui-tabs-nav > li {
    clear: left; width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px 0.2em 0;
}

/* .ui-tabs-vertical .ui-tabs-nav li a { */
.ui-tabs-vertical > .ui-tabs-nav > li > a {
    display:block;
    width: 10em;
}

/* .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { */
.ui-tabs-vertical > .ui-tabs-nav > li.ui-tabs-active {
    padding-bottom: 0;
    padding-right: .1em;
    border-right-width: 1px;
    border-right-width: 1px;
}

/* .ui-tabs-vertical .ui-tabs-panel { */
.ui-tabs-vertical > .ui-tabs-panel {
    padding: 1em;
    float: right;
    width: 35em;
}

/* .ui-tabs .ui-tabs-nav li.ui-tabs-active { */
.ui-tabs.ui-tabs-vertical > .ui-tabs-nav > li.ui-tabs-active {
    margin-bottom: 0.2em;
}

GitHub Pages:サンプル vertical-tab-multiplexing-good-case.html

-jQuery
-,

Copyright© 打ち聞かせ , 2019 All Rights Reserved Powered by STINGER.