クラスを追加するだけで簡単にページ内分割を実装するJavascript

カテゴリ:Javascript小技 2008年3月17日 10:17

更新履歴

2008/09/25
kenta さんの指摘により、ページ指定をしていなくても 1 ページ目を表示するように修正しました。n
2008/03/21
機能を若干拡張しました。
自動生成されたページング部分に、ページ内リンクを設定しました。
これにより、ページ内リンクを含んだリンク(ex. index.html#no3 など)を設定しておくことで自動的に該当のページ部分を表示するように修正しました。
また、ページ内リンクはページを移動する際に自動で付与されます。n

サンプル URL

ちょっとした不具合があったので修正しました(;´д`)(2008/03/17 21:33現在)

ページをやたらと細切れにして PV 数を稼ごうとするメディアサイトの問題と解決策 | Web担当者Forumの記事受けて、ページ分割を簡単に実装できる JavaScript を作ってみました。n

▼サンプル
ページングサンプル

クラスを追加するだけで簡単にページ内分割を実装するJavascriptデモ

ダウンロード

使い方はとても簡単で、分割したい要素にクラス名を追加するだけです。
※Javascriptオフの場合は、分割をなくしてすべてを表示します。
以下、使い方を。n

▼EntryMore▼

1, スクリプトファイルと CSS ファイルの読み込み

スクリプトファイルを読み込みます。js ファイル、CSS ファイルへのパスは保存先のものに変更してください。n

2, 分割処理の実行

上記スクリプトの読み込みのあとに、この分割処理の実行部分を挿入します。
この処理により、ページンググループに設定されている要素を分割し、ページングを挿入します。n

3, 分割したい要素にクラス名をつける

1 ページに表示したい部分を div 要素で囲い、クラス名に "paraGroup" を追加します。
(ex. <div class="paraGroup">)
分割したい要素すべてに、クラス名 "paraGroup" をつけてください。
この "paraGroup" が設定されている要素を分割し表示します。n

4, ページングを挿入する div 要素を設置

上記タグを挿入することで、そのタグの個所にページングを挿入します。
また、追加したタグ分、自動でページングを挿入しますので、
例えば、コンテンツが長い場合に、コンテンツの上下にページングを埋め込むことも可能です。

▼追加されるページングサンプル
ページングサンプル
(※サンプルにある CSS を編集することでカスタマイズが可能です)

一番左と一番右にある矢印は、設定された表示ページ数よりページ数が多い場合に表示されます。
これをクリックすることで 10 ページ目以降のページ処理が表示されます。(※サンプルの場合)n

5, JavaScript オフ時の設定

上記のソースを任意の場所に挿入してください。
JavaScript オフで閲覧している場合は、自動的に非表示の部分を表示します。n

6, オプション

「pini.ini();」のカッコ内に数字を入れることで、ページングの最大表示数を設定できます。
(※デフォルト値は 10 です)n

この記事のカテゴリー一覧を見る⇒Javascript小技

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/68

コメント

1 - kenta さん

はじめまして、便利なjavascriptだなーと思って見せていただきました。n一つ疑問に思ったのでコメントさせて頂きます。nサンプルはこちらの/paging/というアドレスにアクセスするとページングメニューが表示されないのですが、これは/paging/#no○とするのがデフォルトの設定なのでしょうか?nお手数ですが、ご回答頂けたら嬉しいです。よろしくお願いいたします。n

2008年9月24日 13:58

2 - えど Author Profile Pageさん

>>1 - kentaさんコメントありがとうございます!nそして、ご指摘ありがとうございました。nすみません、その動作は不具合です;nですので、特にNo.の指定がなくてもn自動で1ページ目を表示するように修正しました。

2008年9月25日 00:51

3 - kenta さん

修正ありがとうございます。n上手に使えたら日記ページなどにも利用できそうなので楽しみです。nこれからもこちらのブログで勉強させてください。nまた、何かありましたらよろしくお願いします。

2008年9月25日 02:52

4 - ひろと さん

はじめまして。nページングテンプレートを探していてこちらにたどり着きました。n見たとき、これだ!と思って自サイトにとりつけたのですが、いざページをn指定すると上から100pxほど、もしくはparaGroupのてっぺんで表示されます。nページの最初の部分から表示させたいのですが、ソースを見ても皆目わからず・・・。nもしよろしければ、どこを触ればいいのかだけでもご回答願えたらと思います。

2008年12月 3日 19:41

5 - えど Author Profile Pageさん

>>4 - ひろとさんコメントありがとうございます。nえぇと、コメントだけでは状況が分からないので、n可能でしたら、サイト一番下にある問い合わせ用のメールアドレスからアップ先のURLかnキャプチャ画像などをいただけないでしょうか?n(できれば問題の起きているURLを見せていただけると解決が早いかと思います)

2008年12月 4日 21:51

6 - ひろと さん

お返事ありがとうございます。rHP作成を始めたばかりの模索中サイトで、お恥ずかしいのですがrURLはこちらになります。r[URLは管理人が削除しました]r他にページングを施しているところもこんなものです。r申し訳ありませんが、よろしくお願いいたします。rあと、よろしければ、上記URLは参考になさったあとは消して下さればとr思います。

2008年12月 4日 22:41

7 - えど Author Profile Pageさん

>>6 - ひろとさんURL拝見しました。nが、ちょっと言われている内容が把握できませんでした;n使用しているブラウザはIE6でしょうか?nちなみに、こちらで確認したところFirefoxではiframeの(写真リスト)ところのサイズがnとても小さくなってしまっているようです。nIEでも確認しましたが、n問題があるように見受けられませんでした・・。n(なにが正解で、どこに問題があるのか、n比較できないのでなんともいえませんが・・)nもし、それ以外のブラウザを使用しているようであればそのブラウザ名を教えてもらえますか?

2008年12月 5日 01:03

8 - ひろと さん

URLの削除、ありがとうございました。nおっしゃるとおり、IE6を使っています。(WIN2000)n自分のPCが古いせいかなとネットカフェのIE7(XP)ので見たところ問題の内容も似たようなものでしたが・・・あらら。nお手数をおかけして申し訳ありません。

2008年12月 5日 21:36

9 - ひろと さん

何度も申し訳ありません。nFirefox 、Operaと対応させましたがやはり、以前言っていた症状がでるようです。nページが画面よりも長くなったときののような。nはずしてしまったので言える立場ではないんですが、一応報告をいたします。

2008年12月30日 20:50

10 - えど Author Profile Pageさん

>>9 - ひろと さんどもです。n前のコメントでも書きましたが、「正しい」状態がこちらではわからないので(ずれていても、それが正しいのかずれているのかの判断ができないため)nどういう状況なのか分かりかねました;n以前ではFirefoxで見たときにレイアウトが崩れていたのでもしかしたらなにかしらのCSSがぶつかったりしてレイアウトが崩れていたのかもしれません。

2008年12月31日 00:50

11 - haru さん

はじめまして^^rrページ分割をダウンロードさせていただきました。rありがとうございます。rrCSSファイルにイメージも入っていますが、そのままでいいのですか?r指定のデレクトリィーでパスしていますが、表示されません。rテストページを上げていますので、確認して頂いても良いでしょうか^^;r[管理人削除]rURLの削除お願いしますね。r間違っているとおもいますので、ご指導のほどお願いします。rr

2009年6月 9日 20:01

12 - えど Author Profile Pageさん

>>11 - haruさんコメントありがとうございます(*'-')なにも変更を加えない場合は、そのままアップしてもらい、nそれを使ってもらえば正常に動くはずです。n連絡いただいたサイトを拝見したところどうやらJavaScriptファイル内の日本語が文字化けしているためにエラーが起きているようでした。n日本語のコメントを削除したものをアップしなおしましたので再度ダウンロードしてもう一度試してもらえますか?n(ちなみに、ダウンロードしたもののJSファイル内に日本語がある場合はキャッシュの問題かもしれないので、何度かダウンロードをやり直してみてください)

2009年6月10日 00:10

13 - haru さん

お返事ありがとうございます。^^再度ダウンロードしてもう一度試してみましたがn表示されませんでした。nSCC JSは、読み込んでると思うんですけどbooy無いのHTMLの書き込みが間違っているのでしょうか?nHTMLのソースも(えどさん)サンプルページのソースをコピーしたんですけどね^^;端に青い線は、画像の一部のように思うんですが?n僕が根本的に、間違った事をしてるように思います。nソースの書き込み間違っていませんでしたか??n

2009年6月10日 12:25

14 - えど Author Profile Pageさん

>>13 - haruさんうーん、ダメでしたか・・。nサイトを見てみたんですが、どうも、そもそも JS が実行されてないのかな?nという印象を持ちました。n色々とテストしてみないと分かりませんが、nページング実行の「pini.ini();」の後あたりに「alert( pini );」とかを追加してpini がオブジェクトになっているか、nまたアラートが表示されるかを確認してもらえますか?nもしアラートが出ない場合はおそらくページングの処理そのものが実行されていません。nそれからタイトル左側の青いバーは paging.css 内のものですね・・。n組み込みを考えると適切ではなかったですね。nこちらについては修正しておきます。すみません。

2009年6月10日 13:08

15 - haru さん

ご迷惑お掛けしています。^^;「alert( pini );」追加しましたが、表示されませんね。nデモでは、動いてるのに・・僕のソースの書き間違いかなぁ(>_<)CSSフアイルの中にいくつかのCSSがありますがファイル内でイイですよね。(^_^.)

2009年6月10日 23:05

16 - えど Author Profile Pageさん

>>15 - haruさんやっぱり・・。nprototype.js とかでエラーが出ていたのでもしかしたら全体的になにかエラーが起きているのかもしれません。nFirebugとかは使われていますか?nJavaScript のデバッグがとても楽になるのでおすすめですよ。nちなみに>CSSフアイルの中にいくつかのCSSがありますがファイル内でイイですよね。(^_^.)というのがちょっとわからないのですが(;´Д`)ダウンロードした CSS ファイルを全部読み込む必要がありますか?ってことですか?nいちおう paging 用に読み込ませる CSS ファイルなど分かりやすいように編集したものをアップしなおしました。ncss フォルダ内に images フォルダができているのが最新です。nそちらに入っている paging.css を使ってもらうと左側のブルーの border が表示されなくなるはずです。n(読み込むのは paging.css のみで大丈夫です)

2009年6月11日 11:16

17 - haru さん

エラーですか・・^^;CSS件了解しました。nFirebugってなんですか?すみません。n詳しくなくて、良ければ教えて頂けますか(^_^.)

2009年6月11日 22:41

18 - えど Author Profile Pageさん

>>17 - haruさんFirebug というのは、Firefox のアドオンです。nインストールすると、閲覧中の HTML や CSS、JavaScript などあらゆる要素を見ることができます。nさらに HTML の編集や CSS の適用・不適用やn新しいスタイルの追加、なんかもサイトを見ながらできてしまいます。n(操作できるだけで再読み込みしたら元に戻っちゃいますが)nなので自分でサイトを制作しているときなんかでもn例えば position の left や top などを調整するときなどもとても役に立ちます。n日本語のサイトもあるので一度見てみると分かるかと思います↓http://getfirebug.com/jp.html

2009年6月12日 09:55

19 - haru さん

Firebug件^^確認しましたよ。n色々と便利なサイトがあるんですね。ぜんぜん知りませんでした。^^;ところで・・気になっています。↓【手軽に画像のロールオーバー効果を実装するJavaScript】nロールオーバーは、僕のサイトでも使っているのですが、nやたら・・ソースは入ってくるので、気になっていたところです。n※手軽に画像のロールオーバー効果を実装するJavaScriptのソースは、シンプルでいいですね。nHTMLのソースですが、指定は、通常使う画像一枚だけでいいんですか?nオーバー画像書き込みはしなくていいですか?nbody内のクラスのソース教えて下さい。n時間のある時で構いませんので宜しくお願いします。n

2009年6月14日 12:55

20 - えど Author Profile Pageさん

>>19 - haruさんFirebug はほんと便利ですよー。nむしろそれがないと制作スピードが半減しますwn「手軽に画像のロールオーバー効果を実装するJavaScript」は、n他のものと同様に通常時とロールオーバー時のふたつの画像が必要です。n画像の差し替えをせず、ただ単にロールオーバーのエフェクトだけを実装したい場合は、以下の記事が役に立つかもしれません。n▼マウスオーバー時に、レイアウトを崩さずに画像にborderを表示するテクニックhttp://css-eblog.com/csstricks/mouseover-border-effect.htmlそれから、この記事の本題から外れた質問に関してはこのサイトのメニューにある「お問合せ」から連絡を頂けると助かります。

2009年6月15日 09:52