*

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

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

WP-SpamFree by Pole Position Marketing

関連記事

no image

WordCampTokyo2011行ってきた

WordCampTokyo2011 http://2011.tokyo.wordcamp.

記事を読む

no image

Gitに挑んだりしてみる

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

記事を読む

no image

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

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

記事を読む

composerでcakephpをインストールしてプロジェクトを始めてみる

こんにちは!今日も寒いです。 この時期になると気になってくるのが花粉症です。 自分は花粉

記事を読む

no image

wordpress plugin change the taxonomy when you suggest the time

1. at first, download Post Expirator.2.change code

記事を読む

cakephp2にACLプラグインを入れてみた

cakephpで、ユーザーによって権限やアクセスを変えたりする方法を調べてたら、それ用のプラ

記事を読む

no image

SVNリポジトリでコミットできなかった件

ベンダーさんに、先日立てたSVNリポジトリにコミットできないと連絡いただき、調べたところ、権限が

記事を読む

no image

こ、小悪魔・・・

http://co-akuma.directorz.jp/blog/?p=362すげー勉強になる。。

記事を読む

img vertical-align

vertical-alignで画像とテキストの位置を垂直方向で揃える

これも自分のリマインダー用としてエントリー。 画像とテキストが同じ行に並んでいて、垂直

記事を読む

no image

WEBディレクター募集します

仕事でWEBディレクターが必要になりました。HTML/CSSコーディング、ディレクション経験あります

記事を読む

Google AD

Google AD

iPhone6が来ました。アップルのサポートは未だ健在だったというお話。

アップルは製品だけじゃなくて、サポートの対応にまでその企業哲学

iphone6にするか、iphone6plusにするか、まだ決めなくてもいい方法

iphone6が発表されましたね。iwatchは来年に持越しで

パパも2歳になったよ

早いもので子供が2歳になりました。 年を取るごとに年月が早く

転職して新しい職場で仕事始めました

1か月以上もブログを放置してましたが、私は元気です。 むしろ

6月末で現職を退職します

ご存知の方もいらっしゃると思いますが、6月末で現職を退職するこ

→もっと見る

PAGE TOP ↑