WEBページに簡単にタブメニューを設置できるjQueryプラグイン「tabs.js」。今回探し回った中では最も手軽に使えてシンプル。

先日、WEBページを作っていて、タブメニューを作る必要が出てきました。

それで、タブメニューを実装できるjQueryプラグインを探したら、良さそうなものが結構見つかりました。

それらの中には、「アニメーションで見た目的にも凝ったもの」なども多数ありましたが、僕としては以下の観点から良さそうなものを絞り込みました。

とにかく簡単にタブメニューを実装できるもの
タブ表現さえ出来ればデザインには特にこだわらない

で、いろいろ使ってみて最終的に最も「シンプルで簡単に使えそうだ」と選んだのが「tabs.js」です。

こんな感じのタブメニューが簡単にページ内に実装できます。

こころ
我輩は猫である
坊っちゃん

私はその人を常に先生と呼んでいた。
だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。

吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

親譲りの無鉄砲で小供の時から損ばかりしている。
学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。

以下では、Wordpressでの「tabs.js」の実装方法の紹介です。

tabs.jsを利用する主な手順

tabs.jsを用いてWEBページにタブメニューを実装するのに必要となる主な手順は以下です。

tabs.jsのダウンロード
jquery.tabs.jsファイルの設置
スクリプトファイルを呼び出して実行コードを書く
タブ表示用のコードを書く

個人的に「簡単だなぁ」と感じた部分は、必要なファイルがJSファイル1つだけということです。

CSSでのスタイリングも全てJavaScript側で行ってくれるので、スタイルファイル（CSS）を読み込む必要もありません。

tabs.jsのダウンロード

まずは、「tabs.js」からファイルをダウンロードします。

jquery.tabs.js-gh-pages.zipというzipファイルがダウンロードされるので、解凍（展開）してください。

jquery.tabs.jsファイルの設置

ダウンロードしたファイルの中にある、jquery.tabs.jsファイルのみを利用します。

jquery.tabs.jsファイルは、僕の場合以下のような感じで、テーマ内にjsフォルダを作成して設置しました。

js/jquery.tabs.js

CSSでのスタイリングも、JSファイルが自動で行ってくれます。※ページが呼び出されてからJSが呼び出されるまで表示に多少ラグがある。

スクリプトファイルを呼び出して実行コードを書く

スクリプトを実行するために、jquery.tabs.jsファイルを読み込んで、実行コードを書きます。

フッターの</body>手前あたりに、以下のように書き込みます。（<head></head>内でも可）

<script type='text/javascript' src='//code.jquery.com/jquery.min.js'></script>
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.tabs.js'></script>
<script type='text/javascript'>
jQuery(document).ready( function() {
  tabify("#tabs");
});
</script>

親テーマ自体で利用する場合は、get_stylesheet_directory_uri関数ではなく、get_template_directory_uri関数を利用してください。

今回tabs.jsを試した限りでは、「//code.jquery.com/jquery.min.js」コードの呼び出しも必要でした。Wordpress自体でもjQueryは呼び出されています。けれど、Wordpress同梱jQueryでは、何故か動作しませんでした。面倒だったので原因究明まではやってません。

WordPressの作法に則って、スクリプトを呼び出すのであれば、以下のような感じ。

//jquery.tabs.jsを実行するためのスクリプト
function tabs_js_scripts_ex() {
  wp_enqueue_script( 'tab-js-jquery', '//code.jquery.com/jquery.min.js', array(), false, true );
  wp_enqueue_script( 'tab-js', get_template_directory_uri() . '/js/jquery.tabs.js', array( 'tab-js-jquery' ), false, true );
  $data = 'jQuery(document).ready( function() {
             tabify("#tabs");
           });';
  wp_add_inline_script( 'tab-js', $data, 'after' ) ;
}
add_action( 'wp_enqueue_scripts', 'tabs_js_scripts_ex', );

デフォルトで開くタブを設定する場合

「tabs.js」デフォルトのコード「tabify(“#tabs”);」だと、タブが表示されたとき、最初のタブが選択されます。

ただ、selectと、インデックス番号を付け加えることによって、開くタブを指定することも可能です。

$(document).ready( function() {
  tabify( '#tabs' ).select( 1 );
});

開くタブを指定する場合は、インデックス番号になるので、最初のページを指定するには0を、2番目のページを指定するには1、3番目は2といったように指定します。

タブ表示用のコードを書く

最後に、タブを表示するためのHTMLを記入します。

<div id='tabs'>

  <ul>
    <li>タブ1</li>
    <li>タブ2</li>
    <li>タブ3</li>
  </ul>

  <div>
  タブの1ページ目に表示させるHTMLを記入します。
  </div>

  <div>
  タブの2ページ目に表示させるHTMLを記入します。
  </div>

  <div>
  タブの3ページ目に表示させるHTMLを記入します。
  </div>

</div>

大外枠をdivで囲んでtabsとIDをつけます。

li部分がタブとなります。liの順番に対応したdivに対して、タブの内容を記入します。

このように、非常にシンプルなHTMLでタブ内容を書けることも、「tabs.js」を選んだ理由です。