jQueryでタブメニューを作るの巻
JavaScriptのライブラリであるjQueryを用いたタブメニューを作ろうと思うが、
何故かどこを回ってもtab.UIと言う外部プラグインを使ったものしかない……
画像を使うとか、そんな重そうな物ばかり……
無いのなら、作ってしまえホトトギスと言うことで、簡易タブメニューを作成した。
使用しているのはインラインのjquery命令と、外部CSSである。
ちなみに対象部のHTMLはこれ
<ul id="tab_list">
<li id="p_tab">personal</li>
<li id="d_tab">diary</li>
<li id="b_tab">bookmark</li>
</ul>
<div id="personal" class="tab_body">中身1</div>
<div id="rss" class="tab_body">中身2</div>
<div id="bookmark" class="tab_body">中身3</div>
ulの中のliがタブのメニューになる。
その下のdivタグで囲まれた3つがタブの中身である。
それをCSSでこう味付けする（firefoxとsafariで角丸に見える部分は排除）。
#tab_list{
line-height:1em;
margin:0;
margin-left:1em;
margin-bottom:1px;
position:relative;
z-index:0;
}
タブの縦の長さを1文字分にして左と下を少し開け位置を相対位置にする。
下を1pxあけないとタブが本文部分に食い込んでしまうので要注意。
Firefox3.xのみ1pxあけてもまだ食い込んでいるので、位置表示を相対化する。
#tab_list li{
display:inline;
background-color:white;
padding:0 4px;
margin:0 0.1em;
}
リスト要素をインライン化し、背景を白塗りにした後、要素の左右を4pxずつ空ける
左右をあけない場合はpaddingを指定しないこと。
また、要素内が一杯に見えないよう左右を0.1文字ずつ広げておく。
この辺は好みで行ってください。
ul li#d_tab{background-color:#aabbff;}
ul li#b_tab{background-color:#aabbff;}
選択されていない2つのタブの色を変え、選択されていないことが分かるようにする
この辺の色もタブの色に合わせて適宜変更してください。
.tab_body{
background-color:white;
padding:10px;
position:relative;
z-index:1;
}
タブ本体の背景色を設定して相対表示にした後、
タブ自身より前に表示されるようにZ軸の指定を行う
（Firefox3.xでの食い込み対策）
#rss{display:none;}
#bookmark{display:none;}
選択されていないブロック要素を非表示にする。
ここまでで選択できないタブメニューと一つの要素の表示は完成です。
外見だけならタブメニューっぽく見えるようになりました。
後は、jQueryを使って料理していきます。
<script type="text/javascript">
$(function(){
$("#p_tab").click(function (){
$("#p_tab").css("background-color","white");
$("#d_tab").css("background-color","#aabbff");
$("#b_tab").css("background-color","#aabbff");
$("#personal").css("display","block");
$("#rss").css("display","none");
$("#bookmark").css("display","none");
});
});
</script>
タブ一つ分の命令です。
$(”#p_tab”).click(function ()で
idがp_tabの要素がクリックされた場合に動くようになっています。
$(”#p_tab”).css(”background-color”,”white”);でp_tabの背景を白に
$(”#d_tab”).css(”background-color”,”#aabbff”);と
$(”#b_tab”).css(”background-color”,”#aabbff”);で
残りのタブの背景を非選択色に変更しています。
$(”#personal”).css(”display”,”block”);でidがpersonal要素を表示
$(”#rss”).css(”display”,”none”);と
$(”#bookmark”).css(”display”,”none”);は
その他の要素を非表示にしています。
これを残りのタブ要素にも適用することで完成です。
<script type="text/javascript">
$(function(){
$("#p_tab").click(function (){
$("#p_tab").css("background-color","white");
$("#d_tab").css("background-color","#aabbff");
$("#b_tab").css("background-color","#aabbff");
$("#personal").css("display","block");
$("#rss").css("display","none");
$("#bookmark").css("display","none");
});
$("#d_tab").click(function (){
$("#p_tab").css("background-color","#aabbff");
$("#d_tab").css("background-color","white");
$("#b_tab").css("background-color","#aabbff");
$("#personal").css("display","none");
$("#rss").css("display","block");
$("#bookmark").css("display","none");
});
$("#b_tab").click(function (){
$("#p_tab").css("background-color","#aabbff");
$("#d_tab").css("background-color","#aabbff");
$("#b_tab").css("background-color","white");
$("#personal").css("display","none");
$("#rss").css("display","none");
$("#bookmark").css("display","block");
});
});
</script>
タブメニューと言っていますが、実質は最初に全ての要素を読み込んで、
選択していない物を非表示にしてタブの色を変更しています。
タブが選択されることでタブの色の変更を行い、
同時に選択された要素のブロックを表示、
選択されていない要素を非表示にしています。
一番苦労したのはFirefoxの挙動が変なことでCSSでの対策……
なんで2.xできつちり動いていたのを3.xで変にするかなあ
下記環境で確認しました
WinXP + IE7.0・WinXP+Firefox3.0・MacOSX + Safari
ちなみに、Firefox2.xでは1px離れて見えますが、古いブラウザなので無視＞＜
