tabs | IT-view

基本のJavaScriptとCSSだけでタブメニューを作成のは大変面倒くさいです。
jQuery UIを利用して、簡単にタブメニューを作成の方法を紹介します。
シンプルのタブから、いろいろカスタマイズも説明します。

jQueryとjQuery UIのインストールはここを参照してください。

1、基本のタブメニューを作成

先ず、こんな形HTMLを準備してください。作成したいタブ数で<li>タグを書きます。
各<li>に対応する<div>も書きます。
<a>の属性hrefの値と<div>のidが一致しないといけないことを注意してください。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">日本酒</a></li>
    <li><a href="#tabs-2">焼酎</a></li>
    <li><a href="#tabs-3">ビール</a></li>
  </ul>
  <div id="tabs-1">
    <p>・獺祭<br/>・十四代<br/>・久保田</p>
  </div>
  <div id="tabs-2">
    <p>・佐藤<br/>・魔王<br/>・百年の孤独</p>
  </div>
  <div id="tabs-3">
    <p>・朝日<br/>・YEBISU<br/>・麒麟</p>
  </div>
</div>

tabs()函数をコールして、タブを生成します。
HTMLロード時にタブ生成するため下記JavaScriptを実行させます。

$("#tabs").tabs();

これで、タブメニューが生成されました。

2、折り畳めるタブを作成

tabs()函数を使用時に、オプションがサポートされます。
collapsible: trueを指定して、折り畳めるタブを作成できます。

$("#tabs").tabs({
collapsible: true
});

タブメニューを二度クリックしてタブの折り畳みと展開の切替できます。

3、マウスオーバーでタブを切替

デフォルトはクリックでタブを切替する。
event: “mouseover”を指定して、マウスオーバーでタブを切替になります。

$("#tabs").tabs({
event: "mouseover"
});

4、順番が変えれるタブメニュー

マウスでタブをドラッグ＆ドロップしてタブの順番を変えます。

var tabs = $( "#tabs" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
  axis: "x",
  stop: function() {
	tabs.tabs( "refresh" );
  }
});

5、タブメニューを底部表示

タブメニューを中身の底部で表示させます。
JavaScriptでDOMを操作します。
タブのクラス(ui-tabs-nav)でタブを取得してappendToを使って底部に移動します。
これだけタブの丸角は上のままになっていますので、ui-corner-bottomのクラスを追加して丸角を底部に変更します。
JavaScriptはこんな感じです。

$( "#tabs" ).tabs();
// classでタブを探す、上の丸角を直角に、下の直角を丸角に変更する
$( "#tabs .ui-tabs-nav, #tabs .ui-tabs-nav > *" )
  .removeClass( "ui-corner-all ui-corner-top" )
  .addClass( "ui-corner-bottom" );
// タブを下に移動する
$( "#tabs .ui-tabs-nav" ).appendTo( "#tabs" );

出来ました！

6、横でタブメニューを表示

ちょっと工夫します、CSSで横メニューの仕様を調整します。

<style>
  .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 .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
  .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: 40em;}
</style>

javascriptでタブにclassを追加します

$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

出来たタブはこんな感じです。

以上、jQueryUIを利用して、タブの作り方です。

タグ: tabs

jQuery UIを使ってタブメニューを作成