*

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

タグクラウド機能を付加。

右側のナビにタグクラウドを付けた。どうでしょうか。それにしてもワードプレスってタグが簡単だよね。wp

記事を読む

no image

wordpress plug-in [register_taxonomy_for_object_type]

register_taxonomy_for_object_type仕事で使っているWordpress

記事を読む

no image

Gitに挑んだりしてみる

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

記事を読む

no image

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

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

記事を読む

5044276807_c03137cd7b

【アフィリエイト】WordPressプラグイン「AmazonJS」をインストールしてみました

ずん飯尾という芸人さんがいます。 中でも「現実逃避シリーズ」がプチブレイクしていて、現実離

記事を読む

no image

アマゾンのクラウド(AWS)を使ってみる

前々からやろうやろうと思っていて手を着けられていなかったサービス、アマゾンウェブサービス(AWS

記事を読む

no image

WordPress plugin cooperate to EC-CUBE

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

記事を読む

no image

wordpress plugin change the taxonomy when you suggest the time

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

Google AD

Google AD

Slurpy.. #iphone #iphone6 #apple #jakarta #indonesia #instastyle #gadget #ios #gold
iPhone6が来ました。アップルのサポートは未だ健在だったというお話。

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

@APPLE introduces the iPhone 6 & iPhone 6 Plus see the short film now on http://bit.ly/1qO17By #gadgets #tlselitedotcom #thelifestyleelite #thelifestyleelitedotcom #lifestyleelite #iphone6
iphone6にするか、iphone6plusにするか、まだ決めなくてもいい方法

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

child
パパも2歳になったよ

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

The #Liberal #Democrat Avengers! The New Female Thor, African American Captain America (The former Falcon) & Steve Jobs iOS Iron Man! Lol
転職して新しい職場で仕事始めました

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

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

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

→もっと見る

PAGE TOP ↑