クリック一つで記事の一覧レイアウトを切り替える Easy Display Switch

クリック一つで記事の一覧レイアウトを切り替える Easy Display Switch

「Easy Display Switch」はサムネイルなどを使って一覧で表示されているレイアウトをクリック一つで切り替えてくれるスクリプトです。

Easy Display Switch with CSS and jQueryで紹介、配布されているのですが、使い方などの簡単な解説をしたいと思います。

demo page

…ここからが続き

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名か下記画像の通りです。

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;で消しておくって事くらいですかね。

このスクリプトはけっこう使い勝手もよいですし、いろんな所で使えそうなのでおススメかな?って感じです。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article