タブの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でも問題なく動作しました。
これで今後はタブ機能を心置きなく使えます。
Leave a Reply