Tuesday, December 8, 2009
jQueryでフィルタリングをしてみる
大分前にやったやつだけど、ネタが無いので書いておきます（以下に紹介するフィルタリングはfactory.yusukenakanishi.comでも使ってます）。元ネタはこちらにQuick and Easy Filtering with jQuery – Nettuts+。そのままやっても勉強にならないので自分なりに改良を。
HTML
<ul id="list">
<li><a href="hoge" title="PHP HTML">PHP and HTML/XHTML</a></li>
<li><a href="hoge" title="PHP">PHP</a></li>
<li><a href="hoge" title="JavaScript HTML">JavaScript and HTML/XHTML</a></li>
<li><a href="hoge" title="JavaScript">JavaScript and jQuery</a></li>
<li><a href="hoge" title="JavaScript CSS">javascript and CSS</a></li>
// 中略
</ul>
JavaScript
$(function(){
// フィルタリングのメニュー
var filteringMenu = '<ul id="filtering"> <li class="selected"><a href="#New">最新の10件<\/a><\/li> <li><a href="#ALL">ALL<\/a><\/li> <li><a href="#HTML">HTML/XHTML<\/a><\/li> <li><a href="#CSS">CSS<\/a><\/li> <li><a href="#JavaScript">JavaScript<\/a><\/li> <li><a href="#jQuery">jQuery<\/a><\/li> <li><a href="#PHP">PHP<\/a><\/li> <\/ul>'
$('#list').before(filteringMenu);
// #list liのtitle属性にALLを追加
$('#list li a').each(function(){
$(this).attr('title',$(this).attr('title')+' ALL');
});
// 最初に10件のみ表示させる
$('#list li').hide();
$('#list li:lt(10)').fadeIn('slow').removeClass('odd').filter(':odd').addClass('odd');
// フィルタリング
$('#filtering li a').click(function() {
$('#filtering li').removeClass('selected');
$(this).parent('li').addClass('selected');
$('p.notes').remove();
var filterTitle = $(this).attr('href').replace(/#/, '');
// Newの場合は最新の10件だけを表示
if (filterTitle == 'New') {
$('#list li').hide();
$('#list li:lt(10)').fadeIn().removeClass('odd').filter(':odd').addClass('odd');
}
else {
// この条件に合うものを表示する
$('#list li').hide().filter(function () {
var listTitle = $(this).children('a').attr('title');
var filterList = listTitle.indexOf(filterTitle);
if (filterList >= 0) {
return filterTitle;
}
}).fadeIn().removeClass('odd').filter(':odd').addClass('odd');
// 該当するものが何も無いときにメッセージを表示する
if (filterList = $('#list li:visible').length == 0) {
$('#list').before('<p class="notes">0件：該当するものがありません。<\/p>');
$('p.notes').hide().fadeIn();
}
}
return false;
});
});
JavaScriptがOFF環境の時フィルタリングするメニューがあっても何の意味もなさないため、わざとJavaScriptで書き出すようにしています。元ネタではclass属性をフィルタリングしてるんだけど僕は何となくtitle属性に変えました。そして該当するものが無いときは何も無いとメッセージを表示させてます。
ここの書き方ダサいよとかあったら教えてくださいな。
