WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

jQueryとPHPで大きく見やすいページネーションを実装

   

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

 - JavaScript/Ajax , , , , , ,