スイッチでレイアウト変更/コンテンツ表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Switch Display Optionswith CSS &amp; jQuery - by Soh Tanaka</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></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> 
 
<style type="text/css"> 
body {
	margin: 0;
	padding: 10px 0 0;
	background-color:#000;
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
}
* {
	margin: 0;
	padding: 0;
	border: none;
}

ul.display {
	width: 666px;
	list-style: none;
	border-top: 1px solid #333;
}
ul.display li {
	width: 666px;
	height:311px;
	padding: 10px 0;
	margin: 0;
	border-bottom: 1px solid #333;
}
ul.display li a {
	color: #e7ff61;
	text-decoration: none;
}
ul.display li p {
	padding: 0 10px;
}
ul.display li h2 {
	margin: 0;
	padding: 5px;
	font-weight: normal;
	font-size: 1.7em;
 
}

ul.display li img{
	width:350px;
	height:311px;
	display:block;
	float: left;
}
 
ul.thumb_view{
	width: 600px;
	list-style: none;
}
ul.thumb_view li{
	width: 200px;
	height:178px;
	padding:0;
	float: left;
}
ul.thumb_view li h2 {
	display: none;
}
ul.thumb_view li p{
	display: none;
}
ul.thumb_view li img {
	width:200px;
	height:178px;
}
 
 
a.switch_thumb {
	width: 122px;
	height: 22px;
	line-height: 22px;
	padding: 0;
	margin: 10px 0;
	display: block;
	background: url(4.jpg) no-repeat;
	outline: none;
	text-indent: -9999px;
}
a:hover.switch_thumb {
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background-position: left bottom; }
 
 
</style> 
</head> 
 
<body> 
   
<a href="#" class="switch_thumb">Switch Thumb</a> 
 
<ul class="display"> 
	<li> 
			<img src="1.jpg" alt="" />
			<h2><a href="#">Heart Ruby</a></h2> 
			<p>When chrome mixes as impurities by 1%, it becomes ruby of the blood red. The thin red one that it becomes a blue sapphire when iron and titanium mix, and chrome has mixed only by 0.1% is called "Pink sapphire" (Refer to the coloring matter for the [hatsuiro] mechanism of the ruby).  </p> 
	</li> 
	<li> 
			<img src="2.jpg" alt="" />
			<h2><a href="#">Curious amethyst</a></h2> 
			<p>An English name "Amethyst" has derived from amethustos of Greek (They are not made to get drunk). It depends on the belief that there is working that prevents intoxication with Amethist.  </p> 
	</li> 
	<li> 
			<img src="3.jpg" alt="" />
			<h2><a href="#">Tears of sapphire</a></h2> 
			<p>Blue..gem..Japanese name..in general..dark </p> 
	</li> 
</ul> 

 
</body> 
</html>

	Easy Display Switch with CSS and jQuery

ページのレイアウトをスイッチで変更できるスクリプト。
要点を掴みやすいサムネイル的な表示と、詳細も見て取れるリスト表示の様な使い分けができるようになります。
予め２種類のCSSを用意しておいて、スイッチをクリックすることで、ターゲットに付加するセレクタ名を変更してレイアウトを変更する、といった流れです。
jqueryライブラリを使用しています。

セットアップ
コード&CSS

今回はスクリプトはダウンロードせずに、jqueryライブラリから直接読み込む設定をします。
別にダウンロードしても問題ないのでご自由に設定してください。

ヘッダーに上記の記述を行い、スクリプトを読み込ませます。
次にターゲットに付加するセレクタ名などの設定を書き込みます。

ul.displayはターゲットに始めから付加するセレクタ名。
次のthumb_viewはスイッチクリック時に付加されるクラス名です。
ページロード時にまずdisplayのレイアウトが表示され、スイッチをクリックすることでthumb_viewにのレイアウトに変更されます。

お好みで設定したら<head>内の記述は完了です。
次は、コードのマークアップとCSSの設定です。

コードのマークアップ

ヘッダーにてul.displayと設定したので、<body>内に以下のように記述します。

<ul class="display">
<li>コンテンツ</li>
</ul>　

コンテンツと書かれた箇所にページの内容を記述します。
サンプルでは以下のように記述しています。

<ul class="display">
   <li>
   <img src="images/1.jpg" />
   <h2>画像のタイトル</h2>
   <p>画像についての詳細説明</p>
   </li>
</ul>　

次にCSSで<ul class="display">と<ul class="thumb_view">の２つのレイアウトバージョンについて設定します。
サンプルのコードに記載していますので、そちらを参考にしてください。
display時は画像のタイトルや説明を表示させておいて、thumb_viewの時は、それらをアークアップしている<h2>や<p>を非表示にしています。

そして最後にスイッチを設定します。

<a href="#" class="switch_thumb">Switch Thumb</a>　

class="switch_thumb"と付加したリンクを設置してください。