タブメニューを作ってみよう｜jQuery入門4

2009/05/11

こんばんは、きんくまです。
今回は、イベント処理、アニメーションを説明した後に、タブメニューを作ってみたいと思います。

■ex1. イベント処理
ロールオーバー／アウトしてclassをつけかえるようにしてみます。

HTML

<h3>ex.1 mouseover, mouseout</h3>
<div id="ex1">
<div id="mydiv1">mydiv1</div>
</div>

CSS

#mydiv1{
  width:100px;
  height:100px;
  margin-bottom:40px;
  border:1px solid #CCC;
}
#ex1 .over{
  background:#0f0;
}
#ex1 .out{
  background:#ff0;
}

JavaScript

function ex1(){
  $('#mydiv1').mouseover(function(){
    $(this).attr('class', 'over');
  });
  $('#mydiv1').mouseout(function(){
    $(this).attr('class', 'out');
  });
}

構文はこんな感じです。

$(セレクター).イベント名(function(){
    イベント処理
});

⇒イベント一覧はこちらです。

いろいろありますが、ロールオーバー（mouseover）／アウト（mouseout）、クリック（click）、フォームの承認（submit）などを覚えておくとよいでしょう。

■ex2. メソッドチェーン
今まで、$()で取得したあとにひとつのメソッド（関数）を書いてきました。
実は、jQueryはメソッドをしたあとの戻り値がjQueryオブジェクト（$()をした状態）なので、毎回$()をしなくても「.（ピリオド）」を打ってメソッドを何回でもつなげていくことができます。
ex1をメソッドチェーンを使って書き直すとこうなります。

function ex2(){
  $('#mydiv2')
  .mouseover(function(){
    $(this).attr('class', 'over');
  })
  .mouseout(function(){
    $(this).attr('class', 'out');
  });
}

このメソッドチェーンがjQueryの特徴的な部分なのでこうやってかくのが「jQueryらしい」ようです。

■ex3. アニメーション＋bind
アニメーションのサンプルはこんな感じです。

function ex3(){
  $('#ex3_btn1').click(function(){
    $('#mydiv3').animate({marginLeft:0}, 500, "swing");
  });
  $('#ex3_btn2')
  .bind('click', {mystr:'hello mybtn'},function(e){
    trace(e.data.mystr);
    $('#mydiv3').animate({marginLeft:200}, 500, "swing");
  });
}

構文はこんな感じ

$(セレクター).animate({値を変更したいcss名: 値}, アニメーション時間（ミリ秒）, イージング)

値を変更したい部分はObjectなので、いくつも設定することができます。
{width:’300px’, height:’200px’}
とか。
また、イージングは標準ではlinear（線形）, swing（イージングつき）の2つが選べます。
もっと色々試したい方は、
⇒jQuery Easing Plugin
をおためしください。

#ex3_btn2の方のイベント処理をbindというものにおきかえてみました。bindはとても便利なイベント処理で主にカスタムイベント処理や、イベント後の変数をイベント前に設定することができます。ここでは、イベント前に変数を設定して、イベント後に取得しています。

⇒本家のサンプルをみて研究してみてください

■ex4 タブメニューを作ってみよう
ここまでで、だいたいjQueryの基本はおしまいです。
早速タブメニューを作ってみましょう。

HTML

<h3>ex.4 tab menu</h3>
<ul id="ex4_tab" class="clearfix">
<li id="ex4_menu1">メニュー1</li>
<li id="ex4_menu2">メニュー2</li>
<li id="ex4_menu3">メニュー3</li>
</ul>

<div id="ex4" class="clearfix">
<div id="ex4_content_wrapper">
<div class="ex4_content">メニュー1のサンプル<br />
ああああああああいいいいうううえええおおああああああああいいいいうううえええおおああああああああいいいいうううえええおお<br />
かかかかかか<br />
</div>
<div class="ex4_content">メニュー2のサンプル<br />
<img src="images/house.gif" width="100" height="100" alt="おうち" /><br />
ああああああああいいいいうううえええおお<br />
かかかかかか<br />
</div>
<div class="ex4_content">メニュー3のサンプル<br />
ああああああああいいいいうううえええおお<br />
かかかかかか<br />
</div>
</div>
</div>

CSS

#ex4_tab li{
  float:left;
  width:100px;
  margin-right:5px;
  border:1px solid #999;
  padding:8px;
  font-size:0.75em;
  cursor:pointer;
}
#ex4_tab li.active{
  background:#ff0;
}
#ex4{
  overflow:hidden;
  width:200px;
  border:1px solid #999;
  margin-bottom:20px;
}
.ex4_content{
  width:180px;
  float:left;
  padding:10px;
}
#ex4_content_wrapper{
  width:600px;
}

JavaScript

var currentMenu = 1;

function activateMenu(menuNo, isActive){
  var menu = $('#ex4_menu' + menuNo);
  if(isActive){
    menu.attr('class', 'active');
  }else{
    menu.attr('class', '');
  }
}

function ex4(){
  for(var i = 0; i < 3; i++){
    var _no = i + 1;
    $('#ex4_menu' + _no)
    .bind('mouseover', {no: _no}, function(e){
      if(currentMenu != e.data.no){
        activateMenu(e.data.no, true);
      }
    })
    .bind('mouseout', {no: _no}, function(e){
      if(currentMenu != e.data.no){
        activateMenu(e.data.no, false);
      }
    })
    .bind('click', {no: _no}, function(e){

      //古いものは元に戻す
      activateMenu(currentMenu, false);

      //新しいものに設定
      currentMenu = e.data.no;
      activateMenu(currentMenu, true);
      $('#ex4_content_wrapper')
      .stop()
      .animate({marginLeft:(currentMenu - 1) * -200 + 'px'}, 500, "swing");
    });
  }
  //初期化
  activateMenu(currentMenu, true);
}

ここでポイントなのが、ex3でおこなったbindです。イベント登録時からイベント処理後に変数を渡せるため、メニューの番号を渡しています。
それから、説明していなかったのが
$().stop()
です。これはアニメーションを停止させることができます。

■次回は
最後にタブメニューを作ってみましたが、こんなちょっとしたソースでもグローバル変数をたくさん使ってしまいました。次回はこのあたりをなんとかしつつ、JavaScriptのオブジェクト指向の書き方について説明したいと思います。