*

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

紛糾!システム構築の巻

システム作る時って、会社の縮図だと思う。いろいろな立場の人の思惑や損得が入り混じり、考えが違うために

記事を読む

no image

やっぱiphoneはすごかった

  いろいろ迷って2台持ちを決意。iphone1台にすると、データ通信量がハンパない

記事を読む

no image

podcastのテスト

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

記事を読む

cakephpでユーザ定義定数を読みだす方法

サイトを作るにあたって、定数を使いたいときがよくあります。 サイト上のある数値に変更があっ

記事を読む

andoさん写真

「オープンソースカンファレンス2012」でcandycaneのセミナー聞いてきた

 オープンソースカンファレンス2012に行ってきました。 オープンソースカンファレンス20

記事を読む

PVが3000を超えたので3か月やったこととを公表します

ウクライナ情勢が緊迫している昨今、皆様お元気でしょうか? 自分のブログには大きな変化がありました。

記事を読む

no image

biosが起動しない。

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

記事を読む

no image

wordpressのiphone用プラグイン

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

記事を読む

no image

WordPress plugin cooperate to EC-CUBE

downloadhttp://code.google.com/p/now-on-sell/it co

記事を読む

no image

windows7のxamppでvirtual hostを設定する

忘れないように忘れてもいいようにエントリー。 タイトルの通りです。 c:/xampp/a

記事を読む

Google AD

Google AD

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

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

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

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

パパも2歳になったよ

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

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

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

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

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

→もっと見る

PAGE TOP ↑