*

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

wordpressのiphone用プラグイン

Wptouchていうプラグインがあったのでいれてみた。感想は、「ん~、まあこんなものか」です。フリー

記事を読む

CakePHPでFacebook-PHP-SDKを使ってFacebookログインするアプリの作り方

こんにちは! 昨日は東京では45年ぶりに大雪が降りましたね! 自分の家の方でも雪が2

記事を読む

no image

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

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

記事を読む

no image

Blogger Syntax Highlighter

今さらですが、Blogger移転を機にSyntax Highlighterを入れてみました。こちらの

記事を読む

no image

HDからデータを救出。

前回、PCがぶっ壊れたと書いたが、PCI・USB変換アダプタを購入し、内蔵HDからアダプタを取り付け

記事を読む

no image

wordpress plug-in [register_taxonomy_for_object_type]

register_taxonomy_for_object_type仕事で使っているWordpress

記事を読む

no image

zenphotoを考え始める

googleのwebアルバムを使っていて、こりゃ便利じゃわい、と思ってたけど、結局完全に無料じゃない

記事を読む

no image

WordPressアプリ

iPhoneのwordpressアプリ、さっきダウンロードして今テスト。ほとんどの機能が付いてて、い

記事を読む

CakePHP1.3でブラウザを閉じてもセッションが切れないようにする方法

ちょっと体調を崩してしまってましたが、なんとか回復してきました。(辛かった・・・) 本当に

記事を読む

no image

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

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

記事を読む

Google AD

Google AD

PAGE TOP ↑