jQuery.sdFilterMe

JavaScript

コンテンツを並べ替えれるフィルタリング機能の実装「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

関連記事

  1. Checkify

    JavaScript

    軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」

    Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で…

  2. JavaScript

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

  3. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  4. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

  5. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  6. no-image

    JavaScript

    タッチ対応のドロワーコンポーネント「hy-drawer」

    hy-drawerはタッチに対応したドロワーコンポーネントです。And…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP