タブの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