RSSはこちら

ブログテンプレートならHKD

ブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。すでに変にこだわって時間をロスしています。

更新休止のお知らせ

現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。 ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。
  • --⁄--⁄--(--)
  • --:--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告
  • 2009⁄09⁄23(Wed)
  • 21:37

FC2用のページナビをjQueryプラグインで作ってみた

jQueryの勉強がてらにプラグインを作ってみました。

ページナビゲーションを[1 2 3 4 5 ・・・次へ]みたいな感じに複数個のリンクにするやつです。


jQueryのプラグインも難しい事はなく簡単に作れますね・・・。jQuery便利すぎます。
内容は続きをどうぞ。
使い方は次のような感じ。
<script type="text/javascript">
<!--
 $(document).ready(function(){
 $('#mainArea .pageNaviArea').FC2BlogPageNavigation({loopNum: 3, pageNumMax: '<%total_pages>'}); 
});
-->
</script>
HTMLソース1

セレクタでナビゲーションの部分を指定してやって、そこにプラグインのメソッドを指定します。
引数は・・・
loopNum・・・左右のリンクの数をいくつ表示するか
pageNumMax・・・FC2変数の現在のページのトータル数


<div class="pageNaviArea">
<!--permanent_area-->
<ul class="defaultNaviList">
<!--preventry-->
<li><a href="<%preventry_url>" title="<%preventry_title>"><<  prev entry</a></li>
<!--/preventry-->
<li><a href="<%url>" title="ブログホームに戻る">HOME</a></li>
<!--nextentry-->
<li><a href="<%nextentry_url>" title="<%nextentry_title>">next entry  >></a></li>
<!--/nextentry-->
</ul>
<!--/permanent_area-->
<!--not_permanent_area-->
<ul class="defaultNaviList">
<!--prevpage-->
<li><a href="<%prevpage_url>" title="前のページに戻る"><<  prev page</a></li>
<!--/prevpage-->
<li><a href="<%url>" title="ブログホームに戻る">HOME</a></li>
<!--nextpage-->
<li><a href="<%nextpage_url>" title="次のページに進む">next page  >></a></li>
<!--/nextpage-->
</ul>
<!--/not_permanent_area-->
</div>
HTMLソース2

javascriptが実行されると<div class="pageNaviArea">の中身が入れ替わります。
javascriptをoffにしている場合は通常のままなので便利です。


通常ページ、カテゴリー、月別、日別、検索ページ、タグページで動作チェック取れました。
もし気になる方はこのブログのソースを調べてjsファイルを取って使ってみてください。
とりあえずMITライセンスです。
落ち着いたらきちんとした形で公開したいと思います。



[2009/09/27追記]
とりあえず公開できる形になったと思うので追記を・・・

リンクをブロック要素で表現したかったのでclearfixを導入してます。
CSSはこちら
/* FC2BlogPageNavigationArea */
.clearfix {
min-height: 1px;
}
* html .clearfix {
height: 1px;/*\*//*/
height: auto;
overflow: hidden;
/**/
}
.FC2BlogPageNavigation ul {
float: right;
}
.FC2BlogPageNavigation ul li.fc2PageNaviList {
padding-left: 2px;
display: inline;
float: left;
text-align: center;
}
.FC2BlogPageNavigation ul li.fc2PageNaviList a {
background-image: url(http://blog-imgs-29.fc2.com/h/k/d/hkdesign/curve01_default_pageNaviIconBg.jpg);
background-repeat: repeat-x;
background-position: center top;
display: block;
border: 1px solid #d2d1e5;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 1px;
padding-left: 6px;
}
.FC2BlogPageNavigation ul li.fc2PageNaviList a:hover {
background-position: bottom;
text-decoration: none;
color: #FFFFFF;
}
.FC2BlogPageNavigation ul li.fc2PageNaviList.fc2PageNaviPrevBtn a {
}
.FC2BlogPageNavigation ul li.fc2PageNaviList.fc2PageNaviPrevBtn a:hover {
}
.FC2BlogPageNavigation ul li.fc2PageNaviList.fc2PageNaviNow span {
background-image: url(http://blog-imgs-29.fc2.com/h/k/d/hkdesign/curve01_default_pageNaviIconBg.jpg);
background-repeat: repeat-x;
background-position: center bottom;
color: #FFFFFF;
display: block;
border: 1px solid #d2d1e5;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 1px;
padding-left: 6px;
}
.FC2BlogPageNavigation ul li.fc2PageNaviList.fc2PageNaviNext a {
}
.FC2BlogPageNavigation ul li.fc2PageNaviList.fc2PageNaviNext a:hover {
}
CSSソース1


最終的にjavascriptで吐き出されるHTMLソースは次のような感じ。loopNum3でhttp://hkdesign.blog91.fc2.com/を開いた時。
<div class="pageNaviArea">
<div class="FC2BlogPageNavigation clearfix">
<ul>
<li class="fc2PageNaviList fc2PageNaviNow"> <span>0</span> </li>
<li class="fc2PageNaviList"> <a href="http://hkdesign.blog91.fc2.com/page-1.html">1</a> </li>
<li class="fc2PageNaviList"> <a href="http://hkdesign.blog91.fc2.com/page-2.html">2</a> </li>
<li class="fc2PageNaviList"> <a href="http://hkdesign.blog91.fc2.com/page-3.html">3</a> </li>
<li class="fc2PageNaviList fc2PageNaviNextBtn"> <a href="http://hkdesign.blog91.fc2.com/page-1.html">Next</a> </li>
</ul>
</div>
</div>
HTMLソース3



使うにはjQuery1.3が必要です。
公式テンプレートで1つ、自分以外の共有テンプレートで1つ、試しに導入するとうまく動作しました。
ただHTMLやCSSの兼ね合いもあるので、他の方が作った共有テンプレートに組み込むのは難しいかもしれません。


jsソースはこちら
http://blog-imgs-29.fc2.com/h/k/d/hkdesign/jqueryfc2blogpagenavigation-min.js
関連記事
スポンサーサイト
category
WEB技術 > JavaScript
tag
jQuery

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/27-834fbef1

検索フォーム

プロフィール

HKD TEMPLATE


Author:
 Hellow
mail:
 hkdesign.mail☆gmail.com
 ☆を半角@に変えてください。

Henni
Kodawaru
Design
略してHKD

ブログテンプレートならHKDにようこそ!
このサイトではFC2で使える共有テンプレートを配布しています。
サイトについての説明はこちらをどうぞ。

カテゴリ

アクセスランキング

[ジャンルランキング]
ブログ
2623位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
20位
アクセスランキングを見る>>

FC2カウンター

メールフォーム

名前:
メール:
件名:
本文:

アプリ紹介

google chrome拡張機能「high! like!」を作りました。
機能1:はてなハイクをサイト上に投稿できる
機能2:はてなハイク投稿時に同時にtwitterにも投稿する
詳しくは次のURLへお越しください
hk-factory
Googleウェブストア

プラグインギャラリー

ブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。

CastomCategory
CustomRssReader
ImageClock

テンプレートギャラリー

ブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。

動作環境について

テンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。もし、記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。

【Win】FireFox 3 / IE8 / IE7(*) / IE6(*) / Google Chrome
【Mac】FireFox 3.0(*) / Safari 3.0(*)
*マークがあるブラウザは手元に環境がないので、Adobe BrowserLabを使ってチェックしています。

Adobe BrowserLab
https://browserlab.adobe.com/

ライセンスについて

ライセンス形態はGPLライセンスをとります。
簡単に言うと次の4つです。
  • カスタマイズ・再配布など連絡なしに使用OK。
  • ただし、著作権表示は消したらダメです。
  • なんらかの損害が出た場合は自己責任です。
  • 再配布する場合、GPLライセンスが適用されます。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。