*

Pear::pager と TwitterBootstrap をマッシュアップしてみた

公開日: : 最終更新日:2013/12/03 システム, テクニック

joecrawford.com 2012

前回に引き続き、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


Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordCampTokyo2011行ってきた

WordCampTokyo2011 http://2011.tokyo.wordcamp.

記事を読む

嫌われている人から好かれようと思わなくていいんだという件

自分用にちょっとしたライフハックに気づいたので、リマインダーとしてエントリー。 それは「嫌

記事を読む

no image

ワードプレスのプラグイン初作成

タイトルのとおり。ワードプレスのプラグインを作ってみました。仕事でEC-CUBE使って販売をしている

記事を読む

postgresqlデータベースにインデックスを作成する方法

ビットコインが取引停止になったり、LINEがスタンプを自由に作れるようにしたり、何かとにぎや

記事を読む

no image

Gitに挑んだりしてみる

複数で開発するにあたって絶対必要と言ってもいい、バージョン管理ソフト。WEBSVNという選択肢も頭を

記事を読む

no image

postgresqlのvacuumでビビった件

ある日突然、サービスが落ちていると連絡を受けました。 URLにアクセスしてみると、確かにサ

記事を読む

no image

podcastのテスト

podcast配信です! mp3ダウンロード mp4ダウンロード

記事を読む

ファビコン(.ico)の作成方法

テーマを変更したついでと言ってはなんだけど、ファビコンの作成方法をメモしておきます。

記事を読む

no image

stay hungry stay foolish

apple http://www.apple.com/stevejobs/ He die

記事を読む

postgresqlのスロークエリ(スローログ)を取得する

45年ぶりの雪が、1週おきに降るってどういうことでしょうか? とは言え、雪が降るといつもと

記事を読む

Google AD

Google AD

PAGE TOP ↑