Written by Manabu Bannai

【jQuery】サイト内に今風な『ソート機能』を実装する方法

JavaScript PROGRAMMING

使いやすいjQueryプラグインを見つけたので使い方をまとめていきます。
デモは以下からご確認ください。
» MixItUp

それでは、HTMLコード, CSSコード, JavaScriptコードの順に書いていきます。

jQueryでソート機能を実現するためのHTMLコード

<div class="filter" data-filter="all">すべて表示</div>
<div class="filter" data-filter=".category-1">カテゴリー1</div>
<div class="filter" data-filter=".category-2">カテゴリー2</div>

<div id="Container">
	<div class="mix category-1">①カテゴリー1に属する</div>
	<div class="mix category-2">②カテゴリー2に属する</div>
	<div class="mix category-1">③カテゴリー1に属する</div>
	<div class="mix category-2">④カテゴリー2に属する</div>
</div>

jQueryでソート機能を実現するためのCSSコード

#Container .mix{
	display: none;
}

jQueryでソート機能を実現するためのJavaScriptコード

<!-- まずはjQueryを読み込みます -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- ソート機能用のスクリプト読み込み -->
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>

<script type="text/javascript">
$(function(){
	// Instantiate MixItUp:
	$('#Container').mixItUp();
});
</script>

以上で完了です。

人気記事:Web制作の独学方法をガッツリまとめました。

» 【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

おすすめ:Webで稼ぎたいなら、Webマーケティングを学びましょう。ノウハウまとめました。

» 【超初心者向け】Web集客の基礎から応用までガッツリまとめました。