クリック一つで記事の一覧レイアウトを切り替える Easy Display Switch
- Category ：
- Javascript
「Easy Display Switch」はサムネイルなどを使って一覧で表示されているレイアウトをクリック一つで切り替えてくれるスクリプトです。
Easy Display Switch with CSS and jQueryで紹介、配布されているのですが、使い方などの簡単な解説をしたいと思います。
…ここからが続き
Easy Display Switchの使い方
head内
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(document).ready(function(){
$("a.switch_thumb").toggle(function(){
$(this).addClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").addClass("thumb_view");
});
}, function () {
$(this).removeClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("thumb_view");
});
});
});
</script>
レイアウト部分のXHTML
<ul class="display"> <li> <div class="content_block"> <a href="#"><img src="sample.gif" alt="" /></a> <h2><a href="#">Image Name</a></h2> <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p> </div> </li> </ul>
レイアウトを切り替えた際につくclass名か下記画像の通りです。
デモページでは切り替えた際ulにthumb_viewと着く様に指定してあるので
ul.thumb_view li{
width: 250px;
}
ul.thumb_view li h2 {
display: inline;
}
ul.thumb_view li p{
display: none;
}
ul.thumb_view li .content_block a img {
margin: 0 0 10px;
}
この用にCSSで先に指定しておきます。
ポイントとしてはレイアウトを切り替えた際表示させたくない要素をdisplay: none;で消しておくって事くらいですかね。
このスクリプトはけっこう使い勝手もよいですし、いろんな所で使えそうなのでおススメかな？って感じです。
