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

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

更新履歴

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

サンプル URL

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

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

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

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

ダウンロード

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

▼EntryMore▼

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

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

2, 分割処理の実行

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

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

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

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

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

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

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

5, JavaScript オフ時の設定

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

6, オプション

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

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

  • Hatenaブックマークに追加 Hatenaブックマーク数
  • livedoorクリップへ追加 livedoorクリップ数
  • Buzzurlにブックマーク Buzzurlブックマーク数
  • POOKMARK Airlinesへ追加
  • del.icio.usに追加

トラックバックURL

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

コメント

1 - kenta さん

はじめまして、便利なjavascriptだなーと思って見せていただきました。

一つ疑問に思ったのでコメントさせて頂きます。
サンプルはこちらの~/paging/というアドレスにアクセスするとページングメニューが表示されないのですが、これは~/paging/#no○とするのがデフォルトの設定なのでしょうか?


お手数ですが、ご回答頂けたら嬉しいです。よろしくお願いいたします。

2008年9月24日 13:58

2 - えど Author Profile Pageさん

>>1 - kentaさん
コメントありがとうございます!
そして、ご指摘ありがとうございました。

すみません、その動作は不具合です;
ですので、特にNo.の指定がなくても
自動で1ページ目を表示するように修正しました。

2008年9月25日 00:51

3 - kenta さん

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

2008年9月25日 02:52

4 - ひろと さん

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

2008年12月 3日 19:41

5 - えど Author Profile Pageさん

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

2008年12月 4日 21:51

6 - ひろと さん

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

2008年12月 4日 22:41

7 - えど Author Profile Pageさん

>>6 - ひろとさん
URL拝見しました。
が、ちょっと言われている内容が把握できませんでした;
使用しているブラウザはIE6でしょうか?

ちなみに、こちらで確認したところ
Firefoxではiframeの(写真リスト)ところのサイズが
とても小さくなってしまっているようです。

IEでも確認しましたが、
問題があるように見受けられませんでした・・。
(なにが正解で、どこに問題があるのか、
比較できないのでなんともいえませんが・・)

もし、それ以外のブラウザを使用しているようであれば
そのブラウザ名を教えてもらえますか?

2008年12月 5日 01:03

8 - ひろと さん

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

2008年12月 5日 21:36

9 - ひろと さん

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

2008年12月30日 20:50

10 - えど Author Profile Pageさん

>>9 - ひろと さん
どもです。
前のコメントでも書きましたが、「正しい」状態がこちらではわからないので
(ずれていても、それが正しいのかずれているのかの判断ができないため)
どういう状況なのか分かりかねました;

以前ではFirefoxで見たときにレイアウトが崩れていたので
もしかしたらなにかしらのCSSがぶつかったりして
レイアウトが崩れていたのかもしれません。

2008年12月31日 00:50

11 - haru さん

はじめまして^^

ページ分割をダウンロードさせていただきました。
ありがとうございます。

CSSファイルにイメージも入っていますが、そのままでいいのですか?
指定のデレクトリィーでパスしていますが、表示されません。
テストページを上げていますので、確認して頂いても良いでしょうか^^;
[管理人削除]
URLの削除お願いしますね。
間違っているとおもいますので、ご指導のほどお願いします。

2009年6月 9日 20:01

12 - えど Author Profile Pageさん

>>11 - haruさん
コメントありがとうございます(*'-')
なにも変更を加えない場合は、そのままアップしてもらい、
それを使ってもらえば正常に動くはずです。

連絡いただいたサイトを拝見したところ
どうやらJavaScriptファイル内の日本語が文字化けしているために
エラーが起きているようでした。

日本語のコメントを削除したものをアップしなおしましたので
再度ダウンロードしてもう一度試してもらえますか?
(ちなみに、ダウンロードしたもののJSファイル内に日本語がある場合は
キャッシュの問題かもしれないので、何度かダウンロードをやり直してみてください)

2009年6月10日 00:10

13 - haru さん

お返事ありがとうございます。^^

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

2009年6月10日 12:25

14 - えど Author Profile Pageさん

>>13 - haruさん
うーん、ダメでしたか・・。
サイトを見てみたんですが、どうも、そもそも JS が実行されてないのかな?
という印象を持ちました。

色々とテストしてみないと分かりませんが、
ページング実行の「pini.ini();」の後あたりに
「alert( pini );」とかを追加して
pini がオブジェクトになっているか、
またアラートが表示されるかを確認してもらえますか?

もしアラートが出ない場合は
おそらくページングの処理そのものが実行されていません。

それからタイトル左側の青いバーは paging.css 内のものですね・・。
組み込みを考えると適切ではなかったですね。
こちらについては修正しておきます。すみません。

2009年6月10日 13:08

15 - haru さん

ご迷惑お掛けしています。^^;

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

2009年6月10日 23:05

16 - えど Author Profile Pageさん

>>15 - haruさん
やっぱり・・。
prototype.js とかでエラーが出ていたので
もしかしたら全体的になにかエラーが起きているのかもしれません。

Firebugとかは使われていますか?
JavaScript のデバッグがとても楽になるのでおすすめですよ。

ちなみに
>CSSフアイルの中にいくつかのCSSがありますがファイル内でイイですよね。(^_^.)

というのがちょっとわからないのですが(;´Д`)
ダウンロードした CSS ファイルを全部読み込む必要がありますか?ってことですか?
いちおう paging 用に読み込ませる CSS ファイルなど
分かりやすいように編集したものをアップしなおしました。

css フォルダ内に images フォルダができているのが最新です。
そちらに入っている paging.css を使ってもらうと
左側のブルーの border が表示されなくなるはずです。
(読み込むのは paging.css のみで大丈夫です)

2009年6月11日 11:16

17 - haru さん

エラーですか・・^^;

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

2009年6月11日 22:41

18 - えど Author Profile Pageさん

>>17 - haruさん
Firebug というのは、Firefox のアドオンです。
インストールすると、閲覧中の HTML や CSS、JavaScript など
あらゆる要素を見ることができます。

さらに HTML の編集や CSS の適用・不適用や
新しいスタイルの追加、なんかもサイトを見ながらできてしまいます。
(操作できるだけで再読み込みしたら元に戻っちゃいますが)

なので自分でサイトを制作しているときなんかでも
例えば position の left や top などを調整するときなどもとても役に立ちます。

日本語のサイトもあるので一度見てみると分かるかと思います↓
http://getfirebug.com/jp.html

2009年6月12日 09:55

19 - haru さん

Firebug件^^
確認しましたよ。
色々と便利なサイトがあるんですね。ぜんぜん知りませんでした。^^;

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

2009年6月14日 12:55

20 - えど Author Profile Pageさん

>>19 - haruさん
Firebug はほんと便利ですよー。
むしろそれがないと制作スピードが半減しますw

「手軽に画像のロールオーバー効果を実装するJavaScript」は、
他のものと同様に通常時とロールオーバー時のふたつの画像が必要です。

画像の差し替えをせず、ただ単にロールオーバーのエフェクトだけを
実装したい場合は、以下の記事が役に立つかもしれません。

▼マウスオーバー時に、レイアウトを崩さずに画像にborderを表示するテクニック
http://css-eblog.com/csstricks/mouseover-border-effect.html

それから、この記事の本題から外れた質問に関しては
このサイトのメニューにある「お問合せ」から連絡を頂けると助かります。

2009年6月15日 09:52

コメントを投稿





承認されるまでコメントは表示されません。しばらくお待まちください。