MixItUp,suffle.js|ソート、フィルタリングを行うjQueryプラグイン

画面内の要素を画面遷移無しでソートやフィルタリングするjQueryプラグインを試してみましたので、忘れないうちに自分用メモです。

MixItUp

まずはMixItUpというプラグインから。

MixItUp

上記URLに飛ぶとわりとこってりしたデモがありまして、リアルタイムで様々なエフェクトを試すことができます。

とりあえず簡易な機能のみで実装してみました。

簡易にしたデモ

記述は以下のとおりです。

‘data-XXX’という形でHTML側にデータを持たせています。

CSSで要素をdisplay:noneにして、jsでstyleを追加することで表示のオンオフを切り替えているようですので、#Grid .mixへのCSS指定は必ず必要です。それ以外の部分は見た目なので、無くても動作には支障ありません。

これらのソースは本家サイトで公開されているものを改変したものです。
見ていただけるとわかりますが、ボックスの高さが異なる場合、一番高いものを基準に次の段が並びます。今回そもそも調査するきっかけになったお客様のご要望が、mansoryのような感じで高さの異なる要素も上詰めで表示するのが前提なので、このプラグインは今回の目的には合わないようです。

ということでほかに無いかと探していたら、Shuffle.jsを見つけました。

Shuffle.js

配布サイトはこちら。

Shuffle.js

usageに書かれているソースをぱっと見てもソートとフィルタリングを両方設置する方法がよくわからず、あちこちのサイトを見て手探りでなんとか実装してみました。

こちらは各要素が高さにあわせて上に詰まった形の表示となっており、意図通りでした。

ソートとフィルタリングのデモ

以下、ソースです。

理解できているか微妙ですがjs部分を少し解説します。行頭の数字はソースの行番号です。
5:対象の要素を包括するボックスのidを指定
7~12:基本のオプションを指定
14:ソートに関する記述開始。
15:ドロップダウンリスト(.sort-options)に変化があれば処理開始
16:ソートの条件を変数sortに格納
20~33:sortの値で分岐させてソートの条件(opt)を指定
36:指定した条件(opt)でソートを実行
40:フィルタリングに関する記述開始
41:フィルタの条件ボタン(#btn li)をクリックすると処理開始
43:クリックしたボタンのフィルタリングの条件(ソース内でdata-groupとして指定されたものを$this.data(‘group’)で取得)を変数groupに格納
45~46:現在の条件にactiveというクラスを入れる処理
48~54:groupがallではない場合にフィルタリングを実行
こちらは、$grid内の要素に対して判定文を実行し、返り値がtrueだとその要素を表示、falseだと非表示という処理になっているようです。今回、二つ以上の条件で絞込みをする場合のことを想定して、「指定した条件の中に要素のgroup名が含まれているか」を判定文にしています。
こちらは、絞込み条件と要素のgroupが1対1で対応する場合には単純な比較でよいと思います。例えば以下のような書き方で問題なさそうです。

htmlは、こちらも先ほどと同様に’data-XXX’といった形でカテゴリなどを指定します。

こちらのCSSはデモの見た目を調整するためのもので、処理そのものとは関連しないので、無くても動作には問題ありません。


両スクリプトとも、細かいオプションなどは本家サイトをご覧ください。

以上、書き漏れもあるかもしれませんが、不明点はデモのソースなどから直接拾ってみてください。

どなたかの参考になれば幸いです。