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. no-image

    JavaScript

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

  2. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  3. Checkify

    JavaScript

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

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

  4. no-image
  5. Bar Indicator

    JavaScript

    数値をインジケーターで見やすく表示できる「Bar Indicator」

    Bar Indicatorは数値をインジケーターで表示させることができ…

  6. jQuery Glow

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる
  3. Hermèsオレンジスポーツバンド
  4. GoPro HERO8 Black

アーカイブ

PAGE TOP