カテゴリ別表示
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 © 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; }); });
