*

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

ブログ更新情報をTwitterに流す、FeedBurnerの「Socialize機能」

タイトルの通り、ブログの更新情報をTwitterに流す方法。 結論から言うとFeedBurnaer

記事を読む

no image

WEBディレクター、WEBエンジニア募集してます。

いっしょにWEB制作やりましょう! クライアント駐在(派遣) 場所:都営大江戸線

記事を読む

no image

ロリポップ+お名前.comで独自ドメイン取得

onamae.com で独自ドメイン取得しました。 そのときのメモ。 1.lollipo

記事を読む

no image

biosが起動しない。

おとといくらいから、うちのPCが起動しない。OSが起動しないだけじゃなくてBiosが起動しない。ファ

記事を読む

no image

オラクル、「OpenOffice.org」コードの寄贈を表明 – CNET Japan

オラクル、「OpenOffice.org」コードの寄贈を表明 - CNET Japanオープンの流れ

記事を読む

さくらでcakephpを使って500internal server errorが出る場合の対応

こんにちは! 今日は節分ですね。自分の子供のころ、節分と言えば豆まきだったわけですが、近ご

記事を読む

no image

お名前ドットコムとDNSサーバ構築

以前話題にしたサーバ構築の件、DNSサーバとmailサーバを立てる事がなくなった。DNSサーバはお名

記事を読む

【なぜ?!】ブログの直帰率が激減しました【GoogleAnalytics】

少し前から気づいていましたが、このブログの直帰率が激減しました。 まずはこちらの図表からどうぞ。

記事を読む

WordPressのテーマを「stinger」に変えたよ

しばらくぶりにブログ(Wordpress)のテーマを変更しました。 以前はオールホワイトで

記事を読む

no image

AmazonEC2にcakephp2入れたときにエラーが出た件

  たぶんEC2にはcakephpをこれからも入れるだろうから自分用にエントリー。 Amazon

記事を読む

Google AD

Google AD

PAGE TOP ↑