【jQuery】サイト内に今風な『ソート機能』を実装する方法
使いやすい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>
以上で完了です。