*

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

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

関連記事

no image

JQueryのsliderでpagination機能を作ってみた

複数ページが存在するWEBサイトによく使われている機能として「ページネーション」があります。

記事を読む

【今さら】ブラインドタッチができるようになるまでにやった3つの事【もういいでしょ】

過去、仕事で一緒になった人がブラインドタッチが苦手だということがありました。 両手の人差し

記事を読む

no image

wordpressのiphone用プラグイン

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

記事を読む

facebook for PHP SDKを使ってCakePHPでログアウトとポストする方法

ソチオリンピックではスノーボード・ハーフパイプで平野さん・平岡さんが初のメダル獲得をしました

記事を読む

no image

WordPressアプリ

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

記事を読む

no image

xoops cubeを入れてみた

かなり枯れたパッケージだが、xoops cubeを調べたのでエントリー。 Xoops と言われ

記事を読む

【解説】Googleウェブマスターツールの使い方

サイトの分析やアクセス解析のツールと言えばGoogleAnalyticsですよね。 このブ

記事を読む

no image

postgresqlのvacuumでビビった件

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

記事を読む

no image

facebookのビジョンはセマンティックか – ライフログとopen graph

facebookが開発者カンファレンス(f8)でアップデートを発表した。 「また何か機能付

記事を読む

no image

wordpress plugin change the taxonomy when you suggest the time

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

記事を読む

Google AD

Google AD

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

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

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

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

パパも2歳になったよ

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

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

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

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

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

→もっと見る