カテゴリ別表示

jQueryでフィルタ(フィルタリング)機能



《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery Filtering</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/filtering.js"></script>
</head>
<body>
<div id="container">
<h1>jQuery Filtering</h1>

<div id="filter">
<a href="javascript:void(0);" class="allitem">ALL</a> | <a href="javascript:void(0);" class="cat">CAT</a> | <a href="javascript:void(0);" class="food">FOOD</a> | <a href="javascript:void(0);" class="view">VIEW</a> | <a href="javascript:void(0);" class="flower">FLOWER</a>
</div>

<div id="filterlist">
<ul>
<li class="cat"><a href="#"><img src="img/cat1.jpg" alt=""></a></li>
<li class="view"><a href="#"><img src="img/view1.jpg" alt=""></a></li>
<li class="food"><a href="#"><img src="img/food1.jpg" alt=""></a></li>
<li class="cat"><a href="#"><img src="img/cat2.jpg" alt=""></a></li>
<li class="cat"><a href="#"><img src="img/cat3.jpg" alt=""></a></li>
<li class="flower"><a href="#"><img src="img/flower1.jpg" alt=""></a></li>
<li class="cat"><a href="#"><img src="img/cat4.jpg" alt=""></a></li>
<li class="view"><a href="#"><img src="img/view2.jpg" alt=""></a></li>
<li class="food"><a href="#"><img src="img/food2.jpg" alt=""></a></li>
<li class="view"><a href="#"><img src="img/view3.jpg" alt=""></a></li>
<li class="food"><a href="#"><img src="img/food3.jpg" alt=""></a></li>
<li class="cat"><a href="#"><img src="img/cat5.jpg" alt=""></a></li>
<li class="cat"><a href="#"><img src="img/cat6.jpg" alt=""></a></li>
<li class="food"><a href="#"><img src="img/food4.jpg" alt=""></a></li>
<li class="view"><a href="#"><img src="img/view4.jpg" alt=""></a></li>
<li class="cat"><a href="#"><img src="img/cat7.jpg" alt=""></a></li>
<li class="food"><a href="#"><img src="img/food5.jpg" alt=""></a></li>
<li class="cat"><a href="#"><img src="img/cat8.jpg" alt=""></a></li>
<li class="flower"><a href="#"><img src="img/flower2.jpg" alt=""></a></li>
<li class="view"><a href="#"><img src="img/view5.jpg" alt=""></a></li>
<li class="cat"><a href="#"><img src="img/cat9.jpg" alt=""></a></li>
<li class="food"><a href="#"><img src="img/food6.jpg" alt=""></a></li>
<li class="flower"><a href="#"><img src="img/flower3.jpg" alt=""></a></li>
<li class="cat"><a href="#"><img src="img/cat10.jpg" alt=""></a></li>
<li class="flower"><a href="#"><img src="img/flower4.jpg" alt=""></a></li>
<li class="view"><a href="#"><img src="img/view6.jpg" alt=""></a></li>
<li class="cat"><a href="#"><img src="img/cat11.jpg" alt=""></a></li>
<li class="flower"><a href="#"><img src="img/flower5.jpg" alt=""></a></li>
<li class="flower"><a href="#"><img src="img/flower6.jpg" alt=""></a></li>
<li class="flower"><a href="#"><img src="img/flower7.jpg" alt=""></a></li>
</ul>
</div>

<p><small>COPYRIGHT &copy; jQuery Filtering  ALL RIGHTS RESERVED.</small></p>
</div><!--/#container-->
</body>
</html>


《style.css

@charset "utf-8";

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: Arial,Helvetica,sans-serif;
  color: #000;
  text-align: center;
  background: #FFF;
}

a:link { text-decoration:none; color: #000;}
a:visited { text-decoration:none; color: #000;}
a:active { text-decoration:none; color: #000;}
a:hover { text-decoration:none; color: #000;}

h1 {
  margin-bottom: 20px;
  padding: 10px 0;
  background: #000;
  color: #FFF;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
small {
  padding: 30px 0;
  width: 100%;
  font-size: 12px;
}

#container {
  margin: 0 auto;
  width: 550px;
  text-align: center;
}

/* #filter */
#filter {
  margin: 0 auto;
  padding: 15px 0;
  width: 550px;
  text-align: center;
}
#filter a:link { text-decoration:underline; color: #000;}
#filter a:visited { text-decoration:none; color: #000;}
#filter a:active { text-decoration:none; color: #000;}
#filter a:hover { text-decoration:none; color: #000;}

#filter .active {
  font-weight: bold;
}
#filter a.active:link { text-decoration:none; color: #000;}
#filter a.active:visited { text-decoration:none; color: #000;}
#filter a.active:active { text-decoration:none; color: #000;}
#filter a.active:hover { text-decoration:none; color: #000;}

/* #filterlist */
#filterlist {
  margin: 0 auto;
  width: 550px;
  text-align: left;
}

#filterlist ul {
  margin: 0 auto;
  padding: 0;
  width: 550px;
  text-align: left;
}

#filterlist ul li {
  margin: 5px;
  width: 100px;
  text-align: left;
  float: left;
  display: inline;
  overflow: hidden;
}

#filterlist ul li img {
  width: 100px;
  float: left;
}


/* ClearFix */
#filterlist ul:after {
  content: ".";
  height: 0;
  clear: both;
  display: block;
  visibility: hidden;
}

#filterlist ul {
  display: inline-block;
  overflow: hidden;
}

html {
  overflow: scroll;
}


《filtering.js》

$(function(){
	var $setFilter = $('#filter'),
	$setList = $('#filterlist'),
	$setFilterAll = $('.allitem');

	var showFade = 1500,
	showShut = 1500,
	hideFade = 1000,
	hideShut = 1000;

	var $setFilterBtn = $setFilter.children('a'),
	$setFilterList = $setList.children('ul').children('li'),
	$filterAllItem = $setFilterAll.attr('class');

	$setFilterBtn.click(function(){
		if(!($(this).hasClass('active'))){
			var filterClass = $(this).attr('class');
			$setFilterList.each(function(){
				if($(this).hasClass(filterClass)){
					$(this).css({display:'block'});
					$(this).find('*').stop().animate({opacity:'1'},showFade);
					$(this).stop().animate({width:'100px'},showShut);
				} else {
					$(this).find('*').stop().animate({opacity:'0'},hideFade);
					$(this).stop().animate({width:'0'},hideShut,function(){
						$(this).css({display:'none'});
					});
				}
			});
			$setFilterBtn.removeClass('active');
			$(this).addClass('active');
		}
	});

	$setFilterAll.click(function(){
		$setFilterList.each(function(){
			$(this).css({display:'block'});
			$(this).find('*').stop().animate({opacity:'1'},showFade);
			$(this).stop().animate({width:'100px'},showShut);
		});
	});
	$setFilterAll.click();
});


《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Creating a Filterable Portfolio with jQuery</title>
<link rel="stylesheet" href="css/style.css" >
<script src="js/jquery.js"></script>
<script src="js/framework.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="stylesheets/screen-ie6.css">
<![endif]-->
</head>
<body>
<div id="container">
<ul id="filter">
<li class="current"><a href="#">All</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">CMS</a></li>
<li><a href="#">Integration</a></li>
<li><a href="#">Information Architecture</a></li>
</ul>
<ul id="portfolio">
<li class="cms integration"><a href="#"><img src="images/a-list-apart.png" alt="" height="115" width="200">A List Apart</a></li>
<li class="integration design"><a href="#"><img src="images/apple.png" alt="" height="115" width="200">Apple</a></li>
<li class="design development"><a href="#"><img src="images/cnn.png" alt="" height="115" width="200">CNN</a></li>
<li class="cms"><a href="#"><img src="images/digg.png" alt="" height="115" width="200">Digg</a></li>
<li class="design cms integration"><a href="#"><img src="images/espn.png" alt="" height="115" width="200">ESPN</a></li>
<li class="design integration"><a href="#"><img src="images/facebook.png" alt="" height="115" width="200">Facebook</a></li>
<li class="cms information-architecture"><a href="#"><img src="images/google.png" alt="" height="115" width="200">Google</a></li>
<li class="integration development"><a href="#"><img src="images/netflix.png" alt="" height="115" width="200">Netflix</a></li>
<li class="information-architecture"><a href="#"><img src="images/nettuts.png" alt="" height="115" width="200">NETTUTS</a></li>
<li class="design information-architecture cms"><a href="#"><img src="images/twitter.png" alt="" height="115" width="200">Twitter</a></li>
<li class="development"><a href="#"><img src="images/white-house.png" alt="" height="115" width="200">White House</a></li>
<li class="cms design"><a href="#"><img src="images/youtube.png" alt="" height="115" width="200">YouTube</a></li>
</ul>
</div>
</body>
</html>


《style.css

@charset "utf-8";

/* Reset */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

/* basic */
body { color: #333; font: 12px/18px Verdana, Helvetica, Arial, sans-serif; }
h1 { font-size: 1.667em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.333em; }
h4 { font-size: 1.167em; }
h5, h6 { font-size: 1em; }

a { color: #333; }
a:visited { }
a:hover { text-decoration: none; }
p, ul, ol, dl, table { margin-bottom: 18px; }
ul, ol, dd { margin-left: 36px; }

/* class */
.clearing { clear: both; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

/* layout */
div#container { margin: 20px auto 0; overflow: hidden; width: 672px; }

ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 0; width: 100%; }
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; text-decoration: none; }
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: 0; 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 a:hover { text-decoration: none; }
ul#portfolio img { border: 1px solid #dedede; display: block; padding-bottom: 5px; }


《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).text().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;
	});
});