jQueryゼロから / Tab Interface (処理を組み合わせる)


タブインターフェイスはプラグインごろごろ転がっているので、実際に使うのはそちらがいいと思うけど、jQueryの基本的な処理の組み合わせの練習で。
タブクリックに加えて、マウスオーバー入れたい場合もあって、調整する場合もあるし。

まずは適当にHTMLを決めちゃいます。タブとタブの中身の id 属性に統一ルールをつけるくらいかな。
あとは、タブの中身は最初は非表示にすることにします。

1
2
3
4
5
6
7
<span id="tab1" class="tab">タブ1</span>
<span id="tab2" class="tab">タブ2</span>
<span id="tab3" class="tab">タブ3</span>
<br style="clear: left;" />
<div id="target-tab1" class="target" style="display: none;">タブ1の内容</div>
<div id="target-tab2" class="target" style="display: none;">タブ2の内容</div>
<div id="target-tab3" class="target" style="display: none;">タブ3の内容</div>

jQueryでタブにロールオーバーやクリックのアクションを指定します。大まかに下記のような流れにします。

1
2
3
4
5
6
7
$('span.tab').mouseover(function(){
// マウスオーバー処理
}).mouseout(function(){
// マウスアウト処理
}).click(function(){
// クリック処理
});

タブの挙動は背景画像を入れ替えて対応することにします。
jQueryではマウスオーバーなどのイベントから対象となるDOMを拾ってこれるので、これを利用します。
※大体は this で間に合う事も多いですが

1
2
3
4
$('span.tab').mouseover(function(e){
  var target = e.currentTarget;
  $(target).css('background-image', 'url("tab_mouseover.png")');
});

マウスアウトもだいたい同じ。やってることは show / hide の時とほとんど同じ。
タブクリックで中身を展開します。展開には slideUp / slideDown を使います。今回は展開する対象が複数あるので、今どれが開いているかを変数 current で管理することにします。クリックされた状況に合わせて処理を分岐します。

1
2
3
4
5
6
7
8
9
10
11
12
13
$('span.tab').click(function(e){
  var target = e.currentTarget;
  if (current == target.id) {
    // 開いているタブをクリックした場合は閉じる
    current = false; // すべて閉じている
  } else if (current) {
    // 他のタブが開いている場合は、閉じてから対象のタブを開く
    current = target.id; // クリックしたタブが開いている
  } else {
    // タブが全てとじている場合は、対象のタブを開く
    current = target.id;
  }
});

タブを閉じるアニメーションが完了してから開く様な処理は jQuery で次のように指定します。

1
2
3
$('#target-' + current).slideUp('fast', function(){
  $('#target-' + target.id).slideDown('slow');
});

こんな感じでアニメーション(今回はslideUp)の引数に関数を渡すと、処理が完了してから実行してくれます。
サンプル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です