WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

ポートフォリオなどに使えるframework.js

jQueryプラグイン

今回の「framework.js」は画像などをカテゴライズして表示してくれるjQueryです。ポートフォリオなどに非常に向いています。

Creating a “Filterable” Portfolio with jQuery - Envato Tuts+ Code Tutorial

作りは簡単で、まずはメニュー部分のulにIDでfillterと付けて、その中にある、a内の属性、relでカテゴリを分けます。その次にliタグで囲んだ画像のclass名にメニューで作ったrel名を入れるだけです。

framework.jsを使ったデモページ

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>framework.jsを使ったデモページ</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/framework.js"></script>
</head>
<body>
<div id="container">
<h1>framework.jsを使ったデモページ</h1>
<ul id="filter">
<li class="current"><a href="#" class="all">全部</a></li>
<li><a href="#" class="red">赤いもの</a></li>
<li><a href="#" class="green">緑のもの</a></li>
<li><a href="#" class="yellow">黄色いもの</a></li>
<li><a href="#" class="fruits">くだもの</a></li>
</ul>
  
<ul id="portfolio">
<li class="red"><img src="img/01_s.jpg" alt="#"></li>
<li class="red"><img src="img/02_s.jpg" alt="#"></li>
<li class="red fruits"><img src="img/03_s.jpg" alt="#"></li>
<li class="green"><img src="img/04_s.jpg" alt="#"></li>
<li class="green fruits"><img src="img/05_s.jpg" alt="#"></li>
<li class="green"><img src="img/06_s.jpg" alt="#"></li>
<li class="yellow fruits"><img src="img/07_s.jpg" alt="#"></li>
<li class="yellow"><img src="img/08_s.jpg" alt="#"></li>
<li class="yellow"><img src="img/09_s.jpg" alt="#"></li>
</ul>
</div>
</body>
</html>

style.css

/* Portfolio Filter Stylesheet */

/*****Reset*****/
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Lucida Grande",
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*****Basic Definitions*****/
body { 
  color: #333; 
  font: 12px/18px Verdana, Helvetica, Arial, sans-serif;
}
p, ul, ol, dl, table {
	 margin-bottom: 18px; 
	}
ul, ol, dd {
	 margin-left: 36px; 
	}

/*****Basic Layout*****/
div#container {
	 margin: 0 auto;
	 overflow: hidden; 
	 width: 800px;
}
	
h1 {
	text-align: center;
	margin: 20px;
	font-size: 24px;
	font-family:"Times New Roman", Times, serif;
}

ul#filter { 
   float: left; 
	 font-size: 16px; 
	 list-style: none; 
	 margin-top: 30px;
	 width: 800px;
	 margin-left: 64px;
   }

ul#filter li { 
	border-right: 1px solid #dedede;
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
  }
	
ul#filter li:last-child {
	 border-right: none; 
	 margin-right: 0; 
	 padding-right: 0; 
	}
	
ul#filter a {
	 color: #999;
	}
	
ul#filter li.current a, ul#filter a:hover {
	 text-decoration: underline; 
	}
	
ul#filter li.current a {
	 color: #333; 
	 font-weight: bold;
	}

ul#portfolio {
	 float: left; 
	 list-style: none;
	 margin-left: 64px; 
	 width: 672px; 
	}
	
ul#portfolio li { 
	border: 1px solid #dedede; 
	float: left; 
	margin: 0 10px 10px 0; 
	padding: 5px;
	width: 202px;
}

ul#portfolio a {
	 display: block;
	 width: 100%; 
	}
ul#portfolio img {
	 border: 1px solid #dedede;
	 display: block; 
	}

framework.js

$(document).ready(function() {
	$('ul#filter a').click(function() {
		$(this).css('outline','none');
		$('ul#filter .current').removeClass('current');
		$(this).parent().addClass('current');
		
		var filterVal = $(this).attr("class").toLowerCase().replace(' ','-');　
				
		if(filterVal == 'all') {
			$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
		} else {
			
			$('ul#portfolio li').each(function() {
				if(!$(this).hasClass(filterVal)) {
					$(this).fadeOut('normal').addClass('hidden');
				} else {
					$(this).fadeIn('slow').removeClass('hidden');
				}
			});
		}
		
		return false;
	});
});