jquery と pager を触ってみた。


といっても突っ込んでみた感想だけです(・w・

ちまたで話題の jquery も時間あるうちに少しは触ってみようと思ったので、
ちょっと入れてみました。
コーディングするのがめんどくさいからライブラリ使ってみるなんて。。。

ちなみに pager は任意のタグで区切った文章(div とか)を js で区切って
ページングさせるライブラリです。
決してページング処理してボタンおしたらAjaxで飛ぶとか そんなんじゃありませんw

jquery:http://jquery.com/
pager:http://rikrikrik.com/jquery/pager/scripts/

とりあえず

インクルード

<script src=”./js/jquery.js” type=”text/javascript”>
<script src=”./js/jquery.pager.js” type=”text/javascript”>

ページングする記事を書く

<div id=’page’>
  <div>1ページ目ですよ~
  <div>2ページ目ですよ~
  <div>もうネタがないよ~
</div>

画面表示の時は1ページ目ですよ~だけが display:block されて、ほかは none されます

最後

js の設定

$(function(){
  $(“#page”).pager(“div”);
});

全部デフォルト設定にするとこれだけ。
jquery っぽいのが $() のとこだけだなこりゃw

とりあえずこれだけで動きます。

細かい設定はこんなかんじ。

navId: ‘nav’,  //1ページに複数作るときは個別にIDを振る
navClass: ‘nav’,  //CSSのクラス
navAttach: ‘append’,  //ページングの表示部分(before,after,prepend,append)
highlightClass: ‘highlight’,  //現在のページのリンク用CSS  
prevText: ‘«’,  //前のページリンクの表示文字 ”&laquo” は ≪ になる
nextText: ‘»’,  //次のページリンクの表示文字 ”&rlaquo” は ≫ になる
linkText: null,  //ページリンクの表示文字(画像でもOK)
linkWrap: null,  //divタグとかでリンク文字をラップできる
height: null  //コンテンツ自体の高さの設定

ちなみに linkText はこんなかんじでかけますね

linkText : [“<img src=’./gazo/1.gif’ />”,
    ”<img src=’./gazo/2.gif’ />”,
    ”<img src=’./gazo/3.gif’ />”
    ]

SEOの観点からいうとこれアウトだと思います。
あと個人的に、1ページ目にも「前のページ」 最終ページにも「次のページ」が表示されるのがいやだなw

まあブログとかに乗っけるとちょっとスタイリッシュになったりするかも?
Wordpressに乗っけるかは未定ですが!
(prototype.js と干渉するから対処策(リファレンスに書いてあるけど)しないといけないしね)


Leave a Reply