jQueryでタブパネルの作り方

ロールオーバーボタン作成（jQuery使用）

mouseover()とmouseout()命令によって、img要素のsrc属性をその都度切り替える方法です。mouseoverはマウスが乗っかっている間の処理、mouseoutはその逆です。

  • 84.gif
  • 83.gif
  • 85.gif

<div id="z1" class="clearfix">
<ul id="z2">
<li><a href="#"><img src="../gif/84.gif" alt="84.gif" /></a></li>
<li><a href="#"><img src="../gif/83.gif" alt="83.gif" /></a></li>
<li><a href="#"><img src="../gif/85.gif" alt="85.gif" /></a></li>
</ul>
</div>

/*cssファイルへの記述*/
#z1 {
	width:500px;
	background:url(../gif/86.gif) top left repeat-x;
	margin:20px 30px;
	}
ul#z2 {
	margin-left:20px;
	}
ul#z2 li {
	list-style-type:none;
	float:left;
	}
ul#z2 li a {
	position:relative;
	display:block;
	}

//jsファイルへの記述
$(function(){
	$("ul#z2 img[alt='83.gif']").mouseover(function(){
		$(this).attr("src","../gif/87.gif");
	}).mouseout(function(){
		$(this).attr("src","../gif/83.gif");
	});

	$("ul#z2 img[alt='84.gif']").mouseover(function(){
		$(this).attr("src","../gif/88.gif");
	}).mouseout(function(){
		$(this).attr("src","../gif/84.gif");
	});

	$("ul#z2 img[alt='85.gif']").mouseover(function(){
		$(this).attr("src","../gif/89.gif");
	}).mouseout(function(){
		$(this).attr("src","../gif/85.gif");
	});
});

javascriptでのロールオーバーはCSSでのロールオーバーに比較して、背景画像としてあらかじめ切り替え画像を読み込んでいない分表示の際ちらつきが生じるというデメリットがあります。

そのため、jQueryを利用したロールオーバーボタンを作る際は、画像をあらかじめ読み込んでおくプリロードと呼ばれる方法を実行します。具体的には、$("<img>")で画像タグを生成し、attrで切り替わる画像のsrc属性をセットします。上記の例であれば読み込む必要のある画像は、87.gif、88.gif、89.gifの3枚ですので、 

//jsファイルへの記述
$(function(){
    $("ul#z2 img[alt='83.gif']").mouseover(function(){
        $(this).attr("src","../gif/87.gif");
        $("<img>").attr("src","../gif/87.gif");
    }).mouseout(function(){
        $(this).attr("src","../gif/83.gif");
    });
 
    $("ul#z2 img[alt='84.gif']").mouseover(function(){
        $(this).attr("src","../gif/88.gif");
        $("<img>").attr("src","../gif/88.gif");
    }).mouseout(function(){
        $(this).attr("src","../gif/84.gif");
    });
 
    $("ul#z2 img[alt='85.gif']").mouseover(function(){
        $(this).attr("src","../gif/89.gif");
        $("<img>").attr("src","../gif/89.gif");
    }).mouseout(function(){
        $(this).attr("src","../gif/85.gif");
    });
});

のような感じでmouseoverイベントが発生して画像が切り替わって表示されたタイミングでimg要素を生成しておいて、次の画像切り替わり時にはプリロードして使用するというもの。もちろんmouseoverの後でなくmouseoverのfunctionの外に記述してページが読み込まれた後に予め生成して置くのもよいでしょう。

正規表現を使えば、3つのボタンがあったとしても1つの命令に簡略化できるけど、切り替え画像の方に、12_on.gifのような一部が共通の名前を付けなければならないです。ロールオーバーは普通CSSを使いますけど、これでやるなら画像の名前にまで気を付けて正規表現で組んだほうがソースが短くなるのでよさげですね。

ドロップダウンメニュー作成（jQuery使用）

ついでに上のメニューをドロップダウンメニューに改造します。画像を用意するのが手間だったので1つの画像をならべて実装しました。。。

リストの中にリストを入れた骨格を作り、それらをfloatで横並びにします。このときli要素に幅と高さを、li aをブロックレベル要素にしておかないと上手く縦並びの状態でフローとしてくれません。li aの幅と高さはliと同じだから100%を指定すればOK。

jQueryのほうでは、小さなリストを最初はhideで隠しておいて、親リストのボタンにカーソルが来たらhoverイベントでその（選択されたul li＝this）子供のul（"ul",this)をslideDownします。

hoverイベントは、hover(function(){A},function(){B})の形で記述すると、hoverされているときはA、離れたらBという条件分岐命令のよう働きます。

  • a.gif
    • a.gif
    • a.gif
    • a.gif
  • a.gif
    • a.gif
    • a.gif
    • a.gif
  • a.gif
    • a.gif
    • a.gif
    • a.gif

<div id="z3">
<ul id="z4" class="clearfix">
<li><a href="#"><img src="../gif/83.gif" alt="a.gif" /></a>
    <ul class="z4sub">
    <li><a href="#"><img src="../gif/83.gif" alt="a.gif" /></a></li>
    <li><a href="#"><img src="../gif/83.gif" alt="a.gif" /></a></li>
    <li><a href="#"><img src="../gif/83.gif" alt="a.gif" /></a></li>
    </ul>
</li>
<li><a href="#"><img src="../gif/83.gif" alt="a.gif" /></a>
    <ul class="z4sub">
    <li><a href="#"><img src="../gif/83.gif" alt="a.gif" /></a></li>
    <li><a href="#"><img src="../gif/83.gif" alt="a.gif" /></a></li>
    <li><a href="#"><img src="../gif/83.gif" alt="a.gif" /></a></li>
    </ul>
</li>
<li><a href="#"><img src="../gif/83.gif" alt="a.gif" /></a>
    <ul class="z4sub">
    <li><a href="#"><img src="../gif/83.gif" alt="a.gif" /></a></li>
    <li><a href="#"><img src="../gif/83.gif" alt="a.gif" /></a></li>
    <li><a href="#"><img src="../gif/83.gif" alt="a.gif" /></a></li>
    </ul>
</li>
</ul>
</div>

/*cssファイルへの記述*/
#z3 {
	width:500px;
	background:url(../gif/86.gif) top left repeat-x;
	margin:10px 0 10px 40px;
	height:200px;
	}
ul#z4 {
	margin-left:20px;
	}
ul#z4 li {
	list-style-type:none;
	float:left;
	width:114px;
	height:36px
	}
ul#z4 li a {
	width:100%;height:100%;
	line-height:36px;
	position:relative;
	display:block;
	}

//jsファイルへの記述
$(function(){
	$("ul#z4 img[alt='a.gif']").mouseover(function(){
	$(this).attr("src","./gif/87.gif");
	$("").attr("src","./gif/87.gif");
	}).mouseout(function(){
	$(this).attr("src","./gif/83.gif");
	});


	$("ul.z4sub").hide();
	$("ul#z4 li").hover(function(){
		$("ul:not(:animated)",this).slideDown("fast");
		},
		function(){
		$("ul",this).slideUp("fast");
		});
});

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ