Pear::pager と TwitterBootstrap をマッシュアップしてみた
前回に引き続き、WEBアプリをカスタマイズしてみました。
DB使って商品登録をしてると、1ページで表示すると非常に見づらくなることがあります。そんなとき「ページャー」があるとページごとに商品を分けてくれて見やすくなります。ですが、商品が多すぎるとページ数が多くなってきてページャー自体が見づらくなります。この辺りはユーザビリティの域になると思います。
そのユーザビリティを上げてくれるのがTwitterBootstrapです。
これまでに何度かバージョンアップしていて、2013年11月現在でバージョンは3になっています。3では「モバイルファースト」の概念を基に作られているようです。
このTwitterBootstrapにPaginationというコンポーネント(パーツみたいなもの)があり、これを使うとページャーのユーザビリティが非常に高くなります。一度はどこかのサイトで見たことがあると思います。
それで、ページャーですが、今回のWEBアプリでは枯れたライブラリであるPEARのPagerを使ってページ処理をしているので、それに合わせてカスタマイズする形になります。
リンクの形は以下のような形にします。
<div class="pagination"> <ul> <a href="#">aaa</a> </ul> </div>
ですが、これだけだとPEAR::pagerが出力する<a>タグに<li>タグがついてなくて、正しく表示されません。
正しく表示させるためにはPEAR::pagerを少しカスタマイズする必要があります。
PEAR::pagerのCommon.phpというファイルを開いて、<a>タグのところにハードコーディングします。
※「<a」でコード検索すると見つかります。
<li><a href="%s"%s%s%s%s title="%s">%s</a></li>
これで一旦表示ができるようになりましたが、PEAR::pagerのデフォルトでアクティブなページはリンクされないので<li>タグが反映されません。
そのため、pagerのオプション配列に以下の記載が必要になります。
$options = array( 'curPageSpanPre' => '<li class="active"><a>', 'curPageSpanPost' => '</a></li>' );
これでTwitterBootstrapのPaginationが表示されるようになりました。
Book Stock Manager
http://lib.hakomori.net/
参照:
http://d.hatena.ne.jp/pospome/20130322/1363915348
Google AD
関連記事
-
-
SVNリポジトリでコミットできなかった件
ベンダーさんに、先日立てたSVNリポジトリにコミットできないと連絡いただき、調べたところ、権限が
-
-
WEBディレクター、WEBエンジニア募集してます。
いっしょにWEB制作やりましょう! クライアント駐在(派遣) 場所:都営大江戸線
-
-
EC-cube+MYSQL < EC-cube+PostgreSQL
http://sasapurin.doorblog.jp/archives/cat_50047102
-
-
cakephpでユーザ定義定数を読みだす方法
サイトを作るにあたって、定数を使いたいときがよくあります。 サイト上のある数値に変更があっ
-
-
【なぜ?!】ブログの直帰率が激減しました【GoogleAnalytics】
少し前から気づいていましたが、このブログの直帰率が激減しました。 まずはこちらの図表からどうぞ。
-
-
CakePHPでFacebook-PHP-SDKを使ってFacebookログインするアプリの作り方
こんにちは! 昨日は東京では45年ぶりに大雪が降りましたね! 自分の家の方でも雪が2
-
-
サーバを変更したらアクセス数が落ちた件
サーバを変更した レンタルサーバをロリポップからさくらに乗り換えました。 (とは言ってもまだ
-
-
【アフィリエイト】WordPressプラグイン「AmazonJS」をインストールしてみました
ずん飯尾という芸人さんがいます。 中でも「現実逃避シリーズ」がプチブレイクしていて、現実離
-
-
お名前ドットコムとDNSサーバ構築
以前話題にしたサーバ構築の件、DNSサーバとmailサーバを立てる事がなくなった。DNSサーバはお名
-
-
WordPress plugin cooperate to EC-CUBE
downloadhttp://code.google.com/p/now-on-sell/it co