情報のフィルタリングやカテゴライズ、並び替えをする際には都度URLを再読み込みして表示するのが一般的です。とは言えこれでは格好が悪いというケースもあるでしょう。 そこで使ってみて欲しいのがMixItUpです。パネルまたはリストの情報をフィルタリングします。その際のアニメーションがまた格好いいライブラリです。

MixItUpのデモ

まずは動画でご覧ください。

ボタンを押した時のアニメーションが格好よく、洗練されています。

最初の表示です。全ての情報がランダムに並んでいます。

並び替え。数字ごとに並んでいます。

フィルタリング。青のラベルだけになっています。

表示方法としては四角いブロックの他、リストもできます。

MixItUpの使い方

まずはHTMLを次のように記述します。

<div id="Container">
	<div class="mix category-1" data-myorder="2"></div>
	<div class="mix category-2" data-myorder="4"></div>
	<div class="mix category-1" data-myorder="1"></div>
	...
	<div class="mix category-2" data-myorder="8"></div>
</div>

categoryやdata-myorderが並び替えやフィルタリングをサポートする部分になります。フィルタやソートの指定を行う部分は次のように記述します。

<!-- フィルタ -->
<div class="filter" data-filter="all">Show All</div>
<div class="filter" data-filter=".category-1">Category 1</div>
<div class="filter" data-filter=".category-2">Category 2</div>

<!-- ソート -->
<div class="sort" data-sort="default">Default</div>
<div class="sort" data-sort="myorder:asc">Ascending</div>
<div class="sort" data-sort="myorder:desc">Descending</div>
<div class="sort" data-sort="random">Random</div>

data-filterやdata-sortで指定する形ですね。後はJavaScriptで指定します。

$(function(){
  // Instantiate MixItUp:
  $('#Container').mixItUp();
});

MixItUpと写真や音楽アルバムアートを組み合わせたりすると格好いい見せ方ができそうですね。

MixItUpはjQuery/JavaScript製のソフトウェア（個人利用は無料、ビジネス利用は有償）です。

MixItUp patrickkunka/mixitup