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
関連記事
-
-
vertical-alignで画像とテキストの位置を垂直方向で揃える
これも自分のリマインダー用としてエントリー。 画像とテキストが同じ行に並んでいて、垂直
-
-
さくらインターネットでPEARを使ってみる
以前、自分が持っている書籍を管理するアプリ「ブックマネージャー」を作ってアップしてたのですが
-
-
wordpressのパーマリンク設定を変更してみたら大丈夫だった件
wordpressでパーマリンクを変えようと思ってたんですが、なかなか踏み切るタイミングがな
-
-
img画像に隙間(空間)ができる件
何度か経験してそのたびにイラッときたので自分用にエントリー。 スタイルシートで下記のように記述
-
-
嫌われている人から好かれようと思わなくていいんだという件
自分用にちょっとしたライフハックに気づいたので、リマインダーとしてエントリー。 それは「嫌
-
-
佐々木俊尚さんの講演:ソーシャルとクラウドとグローバル
11月17日、Hitachi Open Middleware World Cloud Day に参
-
-
紛糾!システム構築の巻
システム作る時って、会社の縮図だと思う。いろいろな立場の人の思惑や損得が入り混じり、考えが違うために
-
-
WordPressをインストールしたら最初にやってることまとめ
仕事でWordpress使ってるけど、とりあえずすごく役に立ちました。ありがとうございます。個人的に
-
-
ブログ更新情報をTwitterに流す、FeedBurnerの「Socialize機能」
タイトルの通り、ブログの更新情報をTwitterに流す方法。 結論から言うとFeedBurnaer