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

jquery.inputmaskテキスト入力のマスク(入力補助)を作成する「jquery.inputmask」前のページ

タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」次のページzingtouch

関連記事

  1. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

  2. EasyFader Plugin Demo

    JavaScript

    レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo…

    シンプルなフェードアニメーションによるスライドショーを実装することがで…

  3. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

  4. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

  5. Multi-level push menu
  6. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP