2009年12月09日
jQueryで作るアコーディオンパネル
webサイトの限られたスペースを有効使うことができる「アコーディオンパネル」をチュートリアルに沿って作ってみました。
その中で分からなかったことが一つ。スクリプトで出てくる
$("+dd",this).slideDown("slow");
上記のthisがよくわかりませんでした。
全体的に「現在参照されている要素の次のdd」というセレクタであることはわかるのですが、セレクタのあとに,thisなんて使い方をはじめて知ったので、そんな使い方もあるんだなと。
こういうのはgoogleでも検索しにくいんですよね。this自体がありふれた単語なので。
その中で分からなかったことが一つ。スクリプトで出てくる
$("+dd",this).slideDown("slow");
上記のthisがよくわかりませんでした。
全体的に「現在参照されている要素の次のdd」というセレクタであることはわかるのですが、セレクタのあとに,thisなんて使い方をはじめて知ったので、そんな使い方もあるんだなと。
こういうのはgoogleでも検索しにくいんですよね。this自体がありふれた単語なので。
ASCII.jp：jQueryでアコーディオンパネルUIを自作する｜Web制作の現場で使えるjQuery UIデザイン入門
を参考に以下のアコーディオンパネルを作りました。
タイトルをクリックするとその内容が表示され、開いていた内容は非表示になります。
コードは以下の通り。
を参考に以下のアコーディオンパネルを作りました。
タイトルをクリックするとその内容が表示され、開いていた内容は非表示になります。
- タイトル1
サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1
- タイトル2
サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2
- タイトル3
サンプルテキスト3サンプルテキスト3サンプルテキスト3サンプルテキスト3サンプルテキスト3
- タイトル4
サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4
- タイトル5
サンプルテキスト5サンプルテキスト5サンプルテキスト5サンプルテキスト5サンプルテキスト5
コードは以下の通り。
<style type="text/css">
#accordion dl {
width:450px;
}
#accordion dt {
color:#ffffff;
text-indent:3em;
font-weight:bold;
height:30px;
line-height:30px;
background-color:#4F4F4F;
border:solid 1px #000;
border-top:solid 1px #ccc;
border-left:solid 1px #ccc;
}
#accordion dt.selected {
background-color:#4F0000;
}
#accordion dt.over {
background-color:#4F3B3B;
}
#accordion dd {
margin:0px;
background-color:#EEEEEE;
}
#accordion dd p {
margin:0px;
text-indent:1em;
padding:20px;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#accordion dd:not(:first)").css("display","none");
$("#accordion dt:first").addClass("selected");
$("#accordion dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("#accordion dd").slideUp("slow");
$("+dd",this).slideDown("slow");
$("#accordion dt").removeClass("selected");
$(this).addClass("selected");
}
}).mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
});
})
</script>
<div id="accordion">
<dl>
<dt>タイトル1</dt><dd><p>サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1サンプルテキスト1</p></dd>
<dt>タイトル2</dt><dd><p>サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2サンプルテキスト2</p></dd>
<dt>タイトル3</dt><dd><p>サンプルテキスト3サンプルテキスト3サンプルテキスト3サンプルテキスト3サンプルテキスト3</p></dd>
<dt>タイトル4</dt><dd><p>サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4サンプルテキスト4</p></dd>
<dt>タイトル5</dt><dd><p>サンプルテキスト5サンプルテキスト5サンプルテキスト5サンプルテキスト5サンプルテキスト5</p></dd>
</div>
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryでイメージギャラリーを作成。
jQueryでストライプの装飾 :nth-child()
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryでイメージギャラリーを作成。
jQueryでストライプの装飾 :nth-child()
Posted by ヒダカ at 18:00│Comments(0)
│jQuery
