jQueryとPHPで大きく見やすいページネーションを実装
Ajax認証に続いて
PHPで作る便利ツール第二弾です。今回は
PHPの
PEARライブラリの
Pagerクラスを使ってページナビゲーションを実装しました。ページナビゲーションはグーグルやヤフーなど大手ポータルサイトの他、さまざまなサイトで使われていますが、もっと使い勝手のいいナビゲーションを作ろうというのが今回の試みです。
というのも、ページナビゲーションの多くはページ下部まで移動しないとなかったり、ページ番号の数字が小さかったり、隙間なく並んでと扱いづらい印象があったからです。
ページナビの例 おなじみのグーグル検索から
そこで従来のページナビに加えて、
JavaScriptでそれとは別に大きな見やすいナビゲーションを作ることにしました。ページング処理は
PHPに任せ、
CSSと
JavaScriptでデザインとナビ機能を実装します。
jQueryと
jQuery UIを使えば、デザイン面の実装とクロスブラウザ対策がクリア出来て両得なので、今回も
jQueryを使用しています。
試作段階のサンプル ナビゲーションは画面下部に固定される
⇒画面固定でビッグサイズのページネーション
IEおよび
Firefoxなど主要ブラウザで動作確認しています。次回から実装の方法やスクリプト等などを紹介していきたいと思います。
-
JavaScript/Ajax JavaScript, jQuery, jQuery UI, Pager, PEAR, PHP, ページナビゲーション