どもです。
喉がほの痛い餅。です。
前回の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"が付きます。
こちらに別途スタイルを指定する必要があります。