写真の一覧ページなど、Webページ上でたくさん並べられたコンテンツ要素に対して
カテゴリ分けした括りなどで、絞り込んだ状態で表示するフィルタ機能。
ページ上に表示する要素が数多くある場合に有効な機能になったりしますが
そんなフィルタ機能をjQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。
jQueryでフィルタ（フィルタリング）機能をシンプルに実装する方法
まずは動作のサンプルから。
下記画面の上部にあるカテゴリリンクをクリックすると
そのカテゴリの種類で絞り込まれた状態で画像が表示されます。
フィルタ用のリンクをクリックすることで
サイズの縮小とフェードのアニメーションが付いた形で
画像がフィルタリングされます。
このフィルター機能の全体構成について、
まずはHTMLから。
◆HTML <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="cat"><a href="#"><img src="img/cat10.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> </ul> </div>
フィルタ用の（カテゴリ分け用）リンク一式と、
表示リストはそれぞれ任意のIDで囲います。
フィルタする際の判別については、
リンクに任意の名前のクラスを付けて
表示リストでフィルタする要素に対してもリンクと同じクラスを付けます。
————————————————————
・フィルタ用リンク
＜a href=”javascript:void(0);” class=”cat”＞○○○○＜/a＞
・表示リスト
＜li class=”cat”＞○○○○＜/li＞
————————————————————
これらはフィルタするリンクと表示リストのクラスが
同じ名前になっていれば、どんな名前でも大丈夫です。
CSSに関しては特に重要な項目はありませんが
サンプルでのHTMLソースに対してのCSSは以下の様になっています。
◆CSS
/* #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;
}
/* =======================================
ClearFixElements
======================================= */
#filterlist ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#filterlist ul {
display: inline-block;
overflow: hidden;
}
サンプル画面のレイアウトを形成する内容になっています。
そして実際の動作実行用のスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(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();
});
</script>
フィルタ用のリンクがクリックされた際に、自分が持っているクラスを取得して
表示リストの中の同じクラスが付いているものを表示、
それ以外は非表示、といった処理をしています。
スクリプト開始部分にある
—————————————
var $setFilter = $(‘#filter’),
$setList = $(‘#filterlist’),
$setFilterAll = $(‘.allitem’);
—————————————
は上から
—————————————
・フィルタ用リンク一式を囲うエリアのID名
・表示リストを囲うエリアのID名
・「すべて表示」リンク用のクラス名
—————————————
となっているので、
HTML側のID／クラス名を変更する場合は、
ここでの名前も変更しておきます。
表示／非表示の際のアニメーションのスピードは
下記でそれぞれ設定を変更することも出来ます。
—————————————
var showFade = 1500,
showShut = 1500,
hideFade = 1000,
hideShut = 1000;
—————————————
は上から
—————————————
・表示する際のフェードアニメーション時間
・表示する際のスライドアニメーション時間
・非表示になる際のフェードアニメーション時間
・非表示になる際のスライドアニメーション時間
—————————————
フィルタリングする際のアニメーションがうっとおしい場合は
スクリプト内のwidthの値を変えてアニメーションしている部分を変更することで
単純なフェードでフィルター動作を実装させることも可能かと思っています。
クラスを付けるだけでフィルター機能が付けれるシンプルな構成にしているので
Webページ上でフィルター機能が必要になった際に是非。。。