jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリーなどにフィルタリング機能を備えることができるjQueryプラグインです。ここでのフィルタリングというのは、コンテンツをある条件で選別し並べ替える(ソート)ことです。情報量が多いページにおいて、カテゴリごとに並べ替えをするとユーザーにとって見やすくなりますね。jQuery.sdFilterMe を使用すれば、UI・UXデザインを意識したページの作成に繋がります。
jQuery.sdFilterMe
以下、jQuery.sdFilterMeの実際のデモページになります。
jQuery.sdFilterMeは、最新バージョンのjQueryをダウンロードしておく必要があります。
jQuery.sdFilterMeの使用で表現できる動きは、条件を備えたカテゴリのボタンをクリックすると、あらかじめ属性を定められたli要素のみが出現し、その他はページから一時的に消滅します。
その仕組はシンプルです。ul要素で囲まれたli要素内のimg(画像)にデータ(カテゴライズの情報)がリンクされています。また、読み込む画像はそれぞれ異なるサイズの画像で構いません。具体的なマークアップは以下のようになります。
<ul id="sort-me"> <li class="クラス名" data-title="○" data-order="○" data-link="ここにURL"> <img src="画像パス"/> </li> (以下同じように画像とデータをマークアップ) </ul>
これらに、フィルタリングとソートを行うボタンを設置するイメージです。クラス名やdata属性には任意の値を指定します。
アニメーションの種類やアニメーションに要する時間(ミリ秒単位)など、オプションもいくつかあります。
フィルタリングとソート機能を備えると、求めるコンテンツがより見やすく、より早くユーザーへ届くことになり、ユーザビリティに応えるページが作成できます。