コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

jQuery.sdFilterMe

jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリーなどにフィルタリング機能を備えることができるjQueryプラグインです。ここでのフィルタリングというのは、コンテンツをある条件で選別し並べ替える(ソート)ことです。情報量が多いページにおいて、カテゴリごとに並べ替えをするとユーザーにとって見やすくなりますね。jQuery.sdFilterMe を使用すれば、UI・UXデザインを意識したページの作成に繋がります。

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属性には任意の値を指定します。

アニメーションの種類やアニメーションに要する時間(ミリ秒単位)など、オプションもいくつかあります。

jQuery.sdFilterMe

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives