忍者ブログ

iPod shuffle研究所

2012/04/04(水)


当ブログではページ番号・記事番号でジャンプできるようになっている。
(ページの上部と下部にオレンジ色で囲って表示している部分。)

これは忍者ブログの独自タグ"pagelink_10"を使っている。

この独自タグは、実際に表示する際には以下のようなタグに展開される。
<li>1</li>
<li><a href="/Page/2/">2</a></li>
<li><a href="/Page/3/">3</a></li>
<li><a href="/Page/4/">4</a></li>
<li><a href="/Page/5/">5</a></li>
<li><a href="/Page/6/">6</a></li>

一方、bootstrapにはこのような用途のために作られた「pagination」クラスがある。
これは、以下のようにulとliのタグだけで、ページにジャンプするためのボタンを並べてくれるというものだ。
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>


この二つを組み合わせて使えると良いのだが、残念ながら組み合わせるとデザインが崩れてしまう。

原因は、bootstrapのpaginationクラスはaタグのプロパティを設定することでpaginationのデザインを実現しているのだが、一方忍者ブログのpagelink_10では、現在表示中のページについてはaタグのリンクを付けてくれない点にある。
現在のページのところだけ、paginationクラスのデザインが適用されないので、デザインが崩れてしまうのである。

対策としては、現在のページのところにもaタグを追加すればよい。
また、aタグの無い項目=現在のページなのだが、bootstrapでは該当する箇所のliタグのクラスにactiveを追加する必要がある。

これらは、JavaScriptで記述すれば実現可能だ。

当ブログのテンプレートファイルの該当部分はこうなっている。
<ul class="page-nav-list">
<!--if_prev_page-->
<li class="prev">
<a href="<!--$pagelink_prev_link-->">←</a>
</li>
<!--/if_prev_page-->

<!--pagelink_10-->
<li><!--$pagelink_10_link--></li>
<!--/pagelink_10-->

<!--if_next_page-->
<li class="next">
<a href="<!--$pagelink_next_link-->">→</a>
</li>
<!--/if_next_page-->
</ul>
<script>$("ul.page-nav-list li:not(:has(a))").addClass("active").wrapInner('<a href="#"></a>');</script>

ulにクラスを与えて、スクリプトが処理する対象を特定している。

スクリプトは、ulの内側のliタグ全てについて、
「もしliタグの内側にaタグがなかったら、liタグにはactiveクラスを追加し、さらにliタグの内側全体をaタグで囲む」
という処理を行っている。

また、このスクリプトはリストの直後に置いているが、こうしないと、デザインが崩れた状態が一度表示されてから修正される様子が目に見えてしまう。
スクリプトをこの位置で実行するため、jqueryのライブラリはこれより前でロードさせている。
PR
  1. この記事のリンク
  2. | コメント:0

コメント
お名前
タイトル
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

ブログ内検索

プロフィール

勇者カズ坊★
ガジェット好きの徒然日記です。

カテゴリー

最新記事

アーカイブ

広告

最新コメント

勇者カズ坊★ [03/14 ]
匿名希望 [03/14 ]
勇者カズ坊★ [03/09 ]
山田 [03/09 ]
勇者カズ坊★ [02/10 ]
mz2500 [02/10 ]
勇者カズ坊★ [09/19 ]
イーザス [09/19 ]
イーザス [05/09 ]
勇者カズ坊★ [05/08 ]

☆★おすすめショップ★☆

富士カメラ
デジカメなどの限定商品が安い
shopU
キーボードなどの玄人好みの入力機器が揃う
BENQジャパン
液晶ディスプレイのアウトレットがおすすめ
上海問屋
USBメモリやSDカードが安い
エレコムダイレクトショップ
PC関連2100円以上送料無料
サンワダイレクト
PC関連2000円以上送料無料
デンシ電気店
ちょっと変わった電子ガジェットがおすすめ!
にぎわい商店
変わったグッズがたくさんあっておすすめ!
インテリアショップplywood
ちょっと洒落たグッズ満載、一見の価値あり

バーコード

RSS

おすすめ