ホーム > ブログ > jquery タブ機能を使用する

Webデザイナー ブログ

jquery タブ機能を使用する

2010年2月26日(Ajax/jquery)

タブのAPIとかはたくさんあるんですけど、
なんかタブ程度でいろいろインクルードするのも
面倒ですし、自分で作れんじゃないかとかれこれ10時間。。。

やっと形になりました。
APIを使用するわけがわかりました・・・
結構、細かなところで面倒くさいですね。

ボタンが押されたらそれ以外のボタンを切り替えたり、
ボタンが増えたときどうするかとか。。

ガテン系で行けばわりとすぐできるんですけど、
今回はちゃんと汎用性がきいて今後も楽に使えるようなものを
作っておきたかったので、htmlの方だけの編集でタブ機能が使用できるように
作りました。もちろん、画像名やcssを変更する場合はjsの方も編集が必要です。

$(function(){

 var fin = 200;//フェイドイン秒数
 var contents = ".about";//対象クラス
 var bt = ".button";//対象ボタン
 var ext = ".jpg";//ボタン拡張子
 var num = $(bt+" img.active").length;//ボタン数
 
 //マウスオンボタン
 function button(str) {
  //srcの値を取得
  var srcName = str.attr("src");
  var ser = srcName.indexOf("on");
  //onが含まれていなかったら 
  if(ser < = -1){ 
   var reSrcName = srcName.replace(ext,"on"+ext);
   return str.attr("src",reSrcName); 
  }
 }
 
 //表示するための関数
 function display(str) {
  //何番目のボタンをクリックしたか
  $(buttonArray[str]).click(function(){
   //.を.onに切り替える(現在地)
   button($(this));
   //現在地以外のボタンを切り替える
   $.each(buttonArray,function(i){
    //引数の画像番号と違うものだけ差し替える
    if(i != str) {
     $(buttonArray[i]).attr("src", imgArray[i]);
    }
    
   });
   
   $(contents+":not(:eq("+str+"))").hide();//現在地以外の画像を非表示
   $(contents+":eq("+str+")").fadeIn(fin);//現在地を表示
   
  }); 
  
 }
 
 //ボタン画像
 var imgArray = new Array(num);
 $.each(imgArray,function(i) {
  imgArray[i] = "/img/abt"+i+ext;
 }); 
 
 //ボタン位置
 var buttonArray = new Array(num);
 $.each(buttonArray,function(i) {
  buttonArray[i] = bt+" img:eq("+i+")";
 }); 
 
 //初期設定
 $(bt+" img:eq(0)").attr("src", "/img/abt0on.jpg");
 $(contents+":eq(0)").fadeIn(fin);

 
 //ボタンの数だけ関数を呼ぶ
 $.each(buttonArray,function(i){
  display(i);
 });
 
});

結構頑張りましたよ~
最初はもっと長かったんですが、
だいぶダイエットできました。
もうチョイできそうですけど、今日はこのへんで。。。

解説したいとこですが、
今日はもう疲れてしまったので後日。。。

とりあえず、ff,ieでも問題なく動作しました。
これで今後はタブ機能を心置きなく使えます。

人気ブログランキングへ
応援お願いします!

コメントをどうぞ