ど素人から毛を生やす。<延>

ページ内で絞込検索やページ送りをするjQuery

Web > javascript 2014年10月1日(最終更新:10年以上前)

2014年10月1日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。
喉がほの痛い餅。です。

前回のjQueryを改良してみました。

概要

カテゴリのボタンを押すと、対応したカテゴリのもののみが表示されます。
新着○件に対応のほか、ページ送りにも対応しています。

WordPressやMovableTypeなどのCMSでも手軽に扱えるよう、値はClassで管理されています。
使用するのはjQueryのみで、ページ遷移や外部CSVを読み込む必要性がないので、CMSテンプレートを余分に作る必要がない、サイトの他プログラムに影響を与える可能性が低いなどの利点を持つスクリプトとなっています。

displayをnoneにしたり表示したりしているので、ページ上に存在するコンテンツは非表示でも消えていないこと(読み込まれていること)に留意してください。
コンテンツの量が多大だったり、高解像度の画像を使用していたりするとページは重くなります。
そのような場合は、素直にCMSを使用したり、外部CSVを使用した都度読み込み型のプラグインに変更することを推奨します。

デモ

デモを見る

download

使い方

jsを開くと、ユーザー編集箇所という項目があります。
この値をお使いのページに合わせて調整します。

カテゴリのボタンにはclass="カテゴリのスラッグ"をそれぞれ入力します。
コンテンツにもclass="カテゴリのスラッグ(該当するもの全て)"をそれぞれ入力してください。

新着○件を表示したい場合、カテゴリのボタンの中にclass="list_new"のものを用意します。

使用上の注意

カテゴリーのスラッグは部分一致にて識別しています。
よって、例えば「category_a」というカテゴリと「category_aa」というカテゴリが存在した場合、表示が狂ってしまいます。
カテゴリは必ず識別できる形で管理してください。

CSSについて

このプログラムではページ送り部分のdiv.jspagerButtonとその中のspanが自動で生成されます。
また、選択中のページにはclass="now"が付きます。
こちらに別途スタイルを指定する必要があります。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)