Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

jQueryでページ分割

Jul302007
Vote:
http://bizcaz.com/archives/2007/07/30-011249.php
Categories: jQuery
Tags: jQuery
Social Bookmark

Prev Page: jQueryで横スライドなメニューを表示する
Next Page: jQueryでフォーム入力エラー時にブルブルさせてみる

こんばんわ^^

日本代表負けてしまいましたね。
韓国の選手は 10 人にも関わらずです。1 点も入れられないなんて･･･（つω-`｡）

勝負は時の運!! 運がなかったということで、気持ちを切り替えて次はがんばって欲しいのココロ。
応援してますからぁ～ (￣∇￣)/

さて、今回は jQeury を使ってページ分割するカスタマイズに TRY してみましたのでご紹介します。
ページ分割といっても、PHP によるページ分割と違って、ページ内のテキストを表示(見た目)上ページ分割しているだけです。

まぁ、そこら辺は JavaScript なのでしょうがないですよね。

いつものようにyoumosさんのところで、紹介されてた文章をページ分割するjQueryプラグインJavaScrip （pager）を実際にやってみたカスタマイズです。

まずはサンプルですね。
サンプル

上記サンプルは、わたしのサイトの Customize カテゴリのエントリ一覧をページ分割した例です。

ページ分割するには、pager jQuery plug-in で配布されている、jQuery のプラグインを使用します。

ディレクトリ構成

http://●●●.com/
|
+-- js/
| +-- jquery/
| | +-- plugins/
| | | +-- jquery.pager.js
| | |
| | +-- jquery.js
| |

カスタマイズ

まずはプラグインをアップロードします。
こちらから jquery.pager.js をダウンロードして、上記ディレクトリ構成のようにアップロードします。

jQuery はDownloading jQueryから入手できます。
次に構造を説明します。
基本的には以下のような構造になっています。
1. <div id="example1">
2. <p>Page 1 Contents...</p>
3. <p>Page 2 Contents...</p>
4. :
5. :
6. <p>Page N Contents...</p>
7. </div>
青い字で囲われた、赤い字の部分がページに相当します。
たとえば、上記サンプルでは以下のような構造になっています。
1. <div id="entries-block">
2. <ul>
3. <li><a href="●●●" title="□□□">■■■</a></li>
4. <li><a href="●●●" title="□□□">■■■</a></li>
5. </ul>
7. <ul>
8. <li><a href="●●●" title="□□□">■■■</a></li>
9. <li><a href="●●●" title="□□□">■■■</a></li>
10. </ul>
11. </div>
青い字で囲われた(<div id="entries-block">～</div>)、赤い字の部分(<ul>～</ul>)がページに相当します。
具体的には PHP で各ページの区切り(<ul>～</ul>)を作っています。
1. <?php $cnt = 0; $close = 0; ?>
2. <div id="entries-block">
3. <MTEntries category='012Customize( カスタマイズ )'>
4. <?php if (!($cnt++ % 20)) {echo "<ul>\n"; $close = 1;} ?>
5. <li><a href="<$MTEntryPermalink$> title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
6. <?php if (!($cnt % 20)) {echo "</ul>\n"; $close = 0;} ?>
7. </MTEntries>
8. <?php if ($close) echo "</ul>\n"; ?>
9. </div>
次に jquery.pager.js のオプションについて説明します。
上記サンプルでは以下のようなコードでページ分割されています。
1. $('#entries-block').pager('ul', {
2. navId: 'navi_entries',
3. navAttach: 'prepend',
4. prevText: '« Previous',
5. nextText: 'Next »',
6. linkWrap: '<span></span>',
7. highlightClass: 'highlight'
8. });
- navId
  ページ分割時のナビバーのブロック ID を指定します。省略時は 'nav' となります。
- navAttach
  ページ分割時のナビバーの位置を指定します。'prepend' と 'before' が上部にレイアウトされて、'append' と 'after' が下にレイアウトされます。
  デフォルトは 'append' です。
- prevText
  nextText
  ページ分割時の 'Next' / 'Prev' リンクを、任意のテキストで表示させることができます。デフォルトではそれぞれ、'«'、'»' になります。
- linkWrap
  ページ分割時のナビバーを任意のタグでラッパーすることができます。
  サンプルでは、<span></span> で各ページのリンクをラッパーしてます。
- highlightClass
  ページ分割時の、カレントページを強調するためのクラス名称を指定することができます。デフォルトは 'highlight' になります。
  
  たとえばサンプルだと、<span class="highlight">～</span> となります。
上記以外に、'navClass' や 'height' がありますが、サンプルでは使用していません。
最後に CSS です。
サンプルの CSS は以下の通りです。
1. #navi_entries {/* ナビバーのスタイル */
2. }
3. #navi_entries span {/* 各ページリンクのスタイル */
4. margin: 0 0.2em;
5. }
6. #navi_entries .highlight {/* ハイライト時のスタイル */
7. background-color: #ff0000;
8. }