twitter ■お問い合わせ ■当サイトへのリンク ■サイト仕様 ■

現在位置 > LostTechnology > WebDesign > 絞り込み表示するJavaScript

絞り込み表示するJavaScript

Webデザインをしていて、一覧にいくつかのジャンルがあり、それを特定のジャンルだけ表示したいという場合があります。それに対応するためのScriptを書いてみました。

Sample

前提条件は以下のようにリスト要素に画像で項目を用意しているものとします。クリックすることで絞り込み表示し、必要があれば元へ戻せるように全部表示させるアイコンも用意したほうがよいですね。

All caution excel pdf text word zip

使い方

HTML側はシンプルに一覧となるリスト要素と、絞り込み表示用のアイコン行を用意するだけです。例ではCSSとJavaScriptでの処理用にselectsというIDを割り当てています。画像のalt属性はすべて必須です。alt属性を利用して処理していますから。title属性は必須ではありませんが、説明用につけておいたほうがよいでしょう。

<p id="selects">
<span title="全部表示" id="allbutton" onclick="$('#sample li').show()">All</span>
 <img src="/img/icon/caution.gif" alt="caution" title="注意を表示" width="24" height="24">
 <img src="/img/icon/excel.png" alt="excel" title="Excelを表示" width="16" height="16">
 <img src="/img/icon/pdf.png" alt="pdf" title="PDFを表示" width="16" height="16">
 <img src="/img/icon/text.png" alt="text" title="テキストを表示" width="16" height="16">
 <img src="/img/icon/word.png" alt="word" title="Wordを表示" width="16" height="16">
 <img src="/img/icon/zip.png" alt="zip" title="ZIPを表示" width="16" height="16">
</p>
<ul id="sample">
<li><img src="/img/icon/caution.gif" alt="caution" width="24" height="24"> 上のアイコンをクリックすることで絞り込み表示ができます。</li>
<li><img src="/img/icon/excel.png" alt="excel" width="16" height="16"> Excelファイル1</li>
<li><img src="/img/icon/pdf.png" alt="pdf" width="16" height="16"> PDFファイル1</li>
<li><img src="/img/icon/text.png" alt="text" width="16" height="16"> テキストファイル1</li>
<li><img src="/img/icon/word.png" alt="word" width="16" height="16"> Wordファイル1</li>
<li><img src="/img/icon/zip.png" alt="zip" width="16" height="16"> ZIPファイル1</li>
<li><img src="/img/icon/caution.gif" alt="caution" width="24" height="24"> サンプルなのでリンクなどはありません。</li>
<li><img src="/img/icon/excel.png" alt="excel" width="16" height="16"> Excelファイル2</li>
<li><img src="/img/icon/excel.png" alt="excel" width="16" height="16"> Excelファイル3</li>
<li><img src="/img/icon/pdf.png" alt="pdf" width="16" height="16"> PDFファイル2</li>
<li><img src="/img/icon/text.png" alt="text" width="16" height="16"> テキストファイル2</li>
<li><img src="/img/icon/word.png" alt="word" width="16" height="16"> Wordファイル2</li>
<li><img src="/img/icon/pdf.png" alt="pdf" width="16" height="16"> PDFファイル3</li>
<li><img src="/img/icon/zip.png" alt="zip" width="16" height="16"> ZIPファイル2</li>
<li><img src="/img/icon/text.png" alt="text" width="16" height="16"> テキストファイル3</li>
<li><img src="/img/icon/word.png" alt="word" width="16" height="16"> Wordファイル3</li>
<li><img src="/img/icon/zip.png" alt="zip" width="16" height="16"> ZIPファイル3</li>
</ul>

JavaScript側は、まずjQueryを読み込ませておいてください。特殊な処理はしていないので、jQueryのバージョンはどれでも大丈夫だと思います。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

ここではGoogleからjQueryを読み込んでいますが、自分のWebサイトにjQueryを置いて、それを読み込ませるようにしても問題ありません。

続けてjQueryを読み込ませた次の行へ以下のようにJavaScriptを記述してください。この部分は外部のJavaScriptファイルにしておいたほうがメンテナンスが楽になります。

<script type="text/javascript">
function viewSelect(n) {
	$("#sample li").each(function(i) {
		if ($(this).html().match(n)) {
			$(this).show();
		} else {
			$(this).css("display","none");
		}
	});
}
$(function() {
	$('#selects img').css('cursor','pointer').click(function (e) {
		viewSelect($(this).attr('alt'));
	});
});
</script>

処理はシンプルで、項目が画像であれば同じ項目には同じalt属性の値になっているはずなので、絞り込み表示用のアイコンがクリックされたらそのalt属性を取得。その後、各リストの文字列を取得して行内にマッチする文字列があれば表示、なければ非表示にしています。なお、Internet Explorer8以前を見捨ててもよければ、判定に使っている$(this).html().match(n)を$(this).html().match('alt="'+n)のように変更してやや厳しく判定処理をすることも可能です。

ブラウザはFirefox、Google Chrome、Internet Explorer 6/7/8/9/10、Opera、それとChrome for Androidを用いて表示を確認しました。