Movable Type 備忘録

jQueryでページ分割

Jul302007
Author: bzbell
Categories: Customize
Tags: Customize, JavaScript, jQuery

Next Page: Lightboxのように透過レイヤー表示してみる
Prev 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 のオプションについて説明します。
上記サンプルでは以下のようなコードでページ分割されています。
```
$('#entries-block').pager('ul', {
navId:     'navi_entries',
navAttach: 'prepend',
prevText:  '&laquo; Previous',
nextText:  'Next &raquo;',
linkWrap:  '<span></span>',
highlightClass: 'highlight'
});
```
- 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. }